《移动端HTML5实现文件上传》由会员分享，可在线阅读，更多相关《移动端HTML5实现文件上传（4页珍藏版）》请在金锄头文库上搜索。
1、PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。用的技术主要是：ajaxFileReaderFormDataHTML结构：XML/HTML Code1.& lt;div class=camera-area> &n bsp;&n bsp;2. <formenctype=multipart/form-datamethod=post> ; 3. &n bsp;&n bsp;&n bs
2、p;&n bsp;<i nputtype=file n ame=fileToUploadclass=fileToUpload accept=image/* capture=camera/> &n bsp ;&n bsp;4. &n bsp;&n bsp;&n bsp;&n bsp;&n bsp ;& lt;divclass=upload-progress ><spa n& gt;</spa n& gt ;</div> &n bsp;&n bsp;5. &n bsp; &n bsp; &n bsp; &n bsp ;& lt;/form > &n
3、bsp;&n bsp;6. &n bsp; &n bsp; &n bsp; <div class=thumb></div> &n bsp;&n bsp;7. &n bsp; </div> &n bsp;&n bsp;8. &n bsp ;&n bsp;已经圭寸装好的 upload.js，依赖zeptoJavaScript Code1. (fu nctio n($) &n bsp; &n bsp;2. &n bsp;$.exte nd($.fn, &n bsp; &n bsp;3. &n bsp; &n bsp;fileUpload: function( op
4、ts) &n bsp; &n bsp;4. &n bsp; &n bsp; &n bsp;this.each(fu ncti on() &n bsp; &n bsp;5. &n bsp; &n bsp; &n bsp; &n bsp;var $self = $(this); &n bsp; &n bsp;6. &n bsp; &n bsp; &n bsp; &n bsp;var doms = &n bsp; &n bsp;7. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;fileToUpload: $self.fi nd(.fileToUpload), &n
5、bsp; &n bsp;8. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;thumb: $self.fi nd(.thumb), &n bsp; &n bsp;9. progress: $self.find(.upload-progress) &n bsp;10. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;11. &n bsp; &n bsp; &n bsp; &n bsp;var funs = &n bsp; &n bsp;1
6、2. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;/选择文件，获取文件大小，也可以在这里获取文件格式，限制用户上传非要求格式的文件&n bsp; &n bsp;13. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;fileSelected: fun ctio n() &n bsp; &n bsp;14. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var files = (doms.fileToUpload)0.files; &n bsp; &n bsp;15. &n bsp;
7、&n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var count = files .len gth; &n bsp; &n bsp;16. for (var index = 0; index < count; in dex+) &n bsp; &n bsp;17. var file = filesindex; &n bsp;18. &n bsp; &n bsp; &n
8、 bsp; &n bsp; &n bsp; &n bsp; &n bsp;var fileSize = 0; &n bsp; &n bsp;19. if (file.size > 1024 * 1024) &n bsp; &n bsp;20. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;&n bsp; &n bsp; &n bsp;fileSize=(Math.rou nd(file.size * 100 / (1024 * 1024) / 100).toSt
9、ri ng()+ MB; &n bsp; &n bsp;21. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;else &n bsp ;&n bsp;22. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;&n bsp; &n bsp; &n bsp;fileSize=(Math.rou nd(file.size * 100 / 1024) / 100).toStri ng() + KB; &n bsp; &n bsp;23. &n bsp; &n bsp; &n bsp; &n bsp; &n bs
10、p; &n bsp; &n bsp; &n bsp;24. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;fu ns.uploadFile(); &n bsp; &n bsp;25. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;, &n bsp; &n bsp;26. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;/ 异步上传文件 &n bsp; &n bsp;27. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;uploadFile: functi
11、on。 &n bsp; &n bsp;28. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var fd = new FormData();创建表单数据对象 29. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var files = (doms.fileToUpload)0.files; &n bsp; &n bsp;30. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var count = files .len gth;
12、 &n bsp; &n bsp;31. for (var index = 0; index < count; in dex+) &n bsp; &n bsp;32. var file = filesindex; &n bsp;33. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;fd.appe nd(opts.file, file);/
13、 将文件添加到表单数据中&n bsp; &n bsp;34. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;fu ns.previewlmage(file);/上传前预览图片，也可以通过其他方法预览txt &n bsp; &n bsp;35. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;36. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var xhr = new XMLHttpRequest();
14、&n bsp; &n bsp;37. xhr.upload.addEventListener(progress, fun s.uploadProgress, false);/ 监听上传进度 &n bsp; &n bsp;38. &n bsp;&n bsp;&n bsp;&n bsp;&n bsp;&n bsp;xhr.addEve ntListe ner(load,fun s.uploadComplete, false); &n bsp; &n bsp;39. &n bsp;&n bsp;&n bsp;&n bs
15、p;&n bsp;&n bsp;xhr.addEve ntListe ner(error,opts.uploadFailed, false); &n bsp; &n bsp;40. xhr.open(POST, opts.url); &n bsp;41. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;xhr.se nd(fd); &n bsp; &n bsp;42. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;, &n bsp; &n bsp;43. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;/ 文件预览 &n bsp; &n bsp;44. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;previewlmage: function( file) &n bsp; &n bsp;45. &n bsp; &n bsp; &n bsp; &n bsp; &n bsp; &n bsp;var gall
