一、上传图片怎么办在XHTML时代，我们使用HTML文件控件一次只能上传一张图片。要一次上传多张图片，方法是使用flash。例如swfupload.js.遗憾的是，使用复杂点，比如flash文件和页面具有相同的父文件夹，JavaScript文件的大小也相当可观。

之前翻译编辑了一篇关于“ajax上传多文件上传插件”的文章。这个插件的亮点是使用隐藏的iframe框架页面来模拟Ajax上传。但是实际上一次只能上传一张图片，可以多次上传。

HTML5是个好东西，其中之一就是支持多图上传、ajax上传、上传前图片预览、图片拖放上传。纯粹是用文件控制实现的，JS代码很少，很难被称赞！

第二，演示页面

如果你的浏览器是最新的FireFox或者Chrome浏览器，可以点击这里：上传基于HTML5的多图Ajax的演示。

在演示页面，可以点击文件控件上传多张图片，如下图(火狐6截图显示，下同):

如果有非图片文件或者图片尺寸过大，会弹出提示：

或者，您可以将桌面上的图片直接拖到接受拖动的区域：

发布后可以直接预览图片(目前还没有上传到服务器):

此时图片可以提前删除，也可以直接上传。比如我们点击上传按钮，图片就会上传成功。

上传的页面地址返回如下：

此时，相应上传文件夹下的图片可用：

注意：我的博客空间有限，所以会定期清理图片文件夹。所以，不要把这个地方当成免费的照片托管地~ ~。

三.核心骨架脚本浅析首先，文件上传的一个核心文件，前两天晚上编译的比较慢。文件名为：zxxFile.js(右击…下载)。

这个文件只有几k、几百行代码，主要负责文件上传相关的逻辑(选择、删除等)。)和原生JS，因此它与jQuery、YUI、MooYools等兼容。ZxxFile.js其实是一个很小的骨架文件，身体需要单独添加。

ZxxFile.js实际上是一个小对象：

var ZXFILE={//骨骼.}下表显示了ZXXFILE对象的属性(骨架)及其对应的内容含义。

附加说明：上面多次提到的文件参数是指文件对象，其属性值为名称、大小、类型等。然后，在zxxFile.js中，它还有一个便于元素定位的索引属性。

显然，只有骷髅几乎无能为力。演示页之所以有效，是因为它根据上面的骨架和实际需求添加了血肉。可以直接“右键-查看页面源代码”查看所有相关的JavaScript。或者看着我一点一点告诉你。

我们遵循上表中的框架。演示页面借用了流行的jQuery库，用的是骷髅血肉=插件。当然，演示页面并不是为插件运行的(虽然只需要一点点修改)，因为页面的UI对于插件来说显然是不够的。也就是说，你可以利用zxxFile.js的框架，配合自己的JavaScript库，编写自己的基于HTML5的多文件Ajax上传插件！

四、演示页面的部分代码演示页面代码的整体逻辑如下：

Var params={//血肉之躯}；ZXXFILE=$。扩展(ZXXFILE，params)；zxfile . init()；文件输入首先是文件控制元素，如下所示：

Fileinput: $ ('# fileimage ')。get (0)是一个DOM元素，所以应用了jQuery的get方法。以下两个参数相同。

演示页面中的文件控制元素支持多文件选择，其隐藏的奥秘是下面代码中的鲜红色部分：

输入id=' file image ' type=' file ' size=' 30 ' name=' fileselect[]' multiple/

拖动和上传按钮拖动区域和上传按钮(默认隐藏):

Dragdrop: $ ('# filedragarea ')。get (0)，upbutton3360 $ ('# filesubmit ')。获取(0) URL Ajax上传地址，没什么好说的，表单的动作地址取的是：

url: $('#uploadForm ')。attr(“动作”)

filter方法过滤选定的文件。文件控件可以选择任意文件，演示页面是与图像上传相关的演示。空间有限，最好遮挡超大图片。显然，有必要过滤上传的文件。然后，有以下过滤脚本：

filter:函数(文件){ var arrFiles=[]；for (var i=0，文件；文件=文件[I]；I){ if(file . type . index of(' image ')==0){ if(file . size=512000){ alert('您的' ' file.name ' '图片太大，应该小于500k ')；} else { arrfiles . push(file)；}} else {alert ('file'' file.name ' '不是图片，});} }返回arrFiles}zxxFile.js会自动整合过滤后的文件对象列表，以便准确上传。

在方法文件(这里是图片)上选择，然后执行该方法。在这个示例页面中，onSelect方法的主要任务是在浏览器中预览本地图片。上传本地图片前在浏览器中预览的核心脚本是：

var reader=new FileReader()，htmlImagereader . onload=function(e){ HTMl IMage=' img src=' http : ' e . target . result ' '/'；}reader.readAsDataURL(文件)；在这个演示页面中，这个部分的脚本如下。虽然看起来有些长，但实际上，内容只是为了加载一些HTML代码：

onSelect:函数(文件){ var html=' '，I=0；//等待加载gif动画$ ('# preview ')。html(' div class=' upload _ loading '/div ')；var funAppendImage=function(){ file=files[I]；if(file){ var reader=new file reader(). reader . onload=function(e){ html=html ' div id=' uploadList _ ' I ' ' class=' upload _ append _ list ' PS trong ' file . name/' Strong ' ' a href=' JavaScript : ' class=' upload _ delete ' title=' delete ' data-index=' I ' ' delete/ABR/' ' img id=' uploadImage _ ' I ' ' src=' http 3360 ' e . target . result我；funAppendImage()；} reader.readAsDataURL(文件)；} else {//图片相关的HTML片段被加载到$('#preview ')中。html(html)；If (html) {//delete method $(')。上传_删除’)。单击(function () {zxx file.fun)删除文件(files[par sent($(this))。attr(' data-index ')))])；返回false});//提交按钮显示$('#fileSubmit ')。show()；} else {//submit按钮隐藏$(“# FileSubmit”)。hide()；} } };//执行图片HTML片段的载人funAppendImage()；}如果你细心的话，可能会发现索引I基本上是用在上面的HTML元素中，它的作用是方便以后删除，找到对应的元素。然后，需要注意的另一点是，delete事件——执行了ZXXFILE.funDeleteFile()方法，这是从文件列表中删除图片并触发onDelete方法回调所必需的。

OnDelete方法在图片上传或删除时执行fly方法。这个例子就是让它逐渐消失：

onDelete:函数(文件){ $('#uploadList_' file.index)。fade out()；}将{ OnDragover方法文件拖到被拖元素上时执行的方法。在本例中，添加了一个类名，如下所示：

onDragOver:函数(){ $(this)。add CLaSS(' upload _ drag _ hover ')；}onDragLeave方法文件移出元素时执行的方法。在本例中，类名被删除，如下所示：

onDragLeave:函数(){ $(this)。add CLaSS(' upload _ drag _ hover ')；}onProgress方法上传时触发的方法。这个演示的效果是，图片左上角有一个圆角的黑色半透明背景元素，其中的百分比值不断增加。代码：

onProgress:函数(文件，加载，总计){ var eleProgress=$(' # upLoadProgress _ ' file . index)，百分比=(加载/总计* 100)。toFixed(2)“%”；eleProgress.show()。html(百分比)；}onSuccess方法当前图片上传成功后要执行的方法。这个演示是提示返回的图片地址信息：

成功时：函数(文件，响应){$ ('# uploadinf ')。追加(' p上传成功，图片地址为：' response ' '/p ')；}onFailure方法：图片上传打嗝时小便的方法。这个演示是一个提示，然后图片是轻而透明的：

失败时：函数(文件){$ ('# uploadinf ')。追加(' p picture' file.name '上传失败！/p ')；$(“# uploadImage _”文件. index)。css('不透明度'，0.2)；}onComplete方法当上传完所有图片后，在本示例页面中，文件控件的值为空，按钮被隐藏：

OnComplete:函数(){//submit按钮隐藏$('#fileSubmit ')。hide()；//file控件的值为空$(“# file image”)。val(“”)；$('#uploadInf ')。append('p当前所有图片都已上传，所以可以继续添加和上传。/p ')；}PHP页面相关代码。

$ fn=(isset($ _ SERVER[' HTTP _ X _ FILENAME '])？$ _ SERVER[' HTTP _ X _ FILENAME ']: false)；if($ fn){ file _ put _ contents(' uploads/')。$fn，file _ get _ contents(' PHP ://input ')；echo ' http://www . Zhang xinxu.com/study/201109/uploads/$ fn '；exit()；}这些是主要功能或交互代码。至于CSS样式和HTML代码中的一些细节，我就不劳神去挑芝麻了。如果你感兴趣，可以通过查看源代码来观察。

动词（verb的缩写）目前HTML5文件Ajax上传的应用范围不仅IE浏览器不支持，最新win下的Safari浏览器或Opera也不完全支持，为什么要学这个？至少现在没有鸟了。

事实上，在我们的一些外部项目中，将这项技术用于用户使用的网页还为时过早。但是，对于公司的内网项目来说，这个绝对可以。我发现了一个很奇怪的问题。很多时候，内网的网页支持较低版本的IE，但不支持现代浏览器。这完全是在错误的道路上。

最近我公司开始改变内网项目，开始开发基于Chrome等现代浏览器的内网(当然也可以用IE浏览器)，内部员工被迫使用Chrome浏览器。就我们公司来说，反响很好，在UI效果、交互、速度等方面反馈都不错。

显然，至少在我们公司，未来如果要为内网的编辑或小秘书做一个多图上传功能，可以直接用HTML5文件上传，这就是本文提到的内容。简单、快速、敏捷会让你意识到发展是一件快乐而有价值的事情。

另外，本文的演示页面更多是举例，如有错误，请见谅。ZxxFile.js刚刚发布，没有经验。非常感谢您的宝贵意见。

原创文章，转载请注明来自张新旭-鑫空间-鑫生活[http://www.zhangxinxu.com]地址：http://www.zhangxinxu.com/wordpress/? p=1923

这就是本文的全部内容。希望对大家的学习有帮助，希望大家多多支持我们。