filter方法
对选择的文件进行过滤。file控件什么文件都能选，而demo页面是图片上传相关的demo；空间大小有限，超大尺寸的图片还是挡着为好。显然，要对上传文件进行过滤。于是，就有了如下的过滤脚本：
filter: function(files) { var arrFiles = []; for (var i = 0, file; file = files[i]; i++) { if (file.type.indexOf("image") == 0) { if (file.size >= 512000) { alert('您这张"'+ file.name +'"图片大小过大，应小于500k'); } else { arrFiles.push(file); } } else { alert('文件"' + file.name + '"不是图片。'); } } return arrFiles; }
zxxFile.js会自动对过滤后的文件对象列表进行整合，以准确上传。
onSelect方法
文件（这里就是图片）选择后执行的方法。在本实例页面中，onSelect方法的主要任务就是本地图片在浏览器中的预览。本地图片上传之前在浏览器中预览的核心脚本就是：
var reader = new FileReader(), htmlImage; reader.onload = function(e) { htmlImage = '<img src="'+ e.target.result +'" />'; } reader.readAsDataURL(file);
在本demo页面中，该部分完成脚本如下，虽好像有些长度，其实内容就是装载一些HTML代码而已：
onSelect: function(files) { var html = '', i = 0; //等待载入gif动画 $("#preview").html('<div></div>'); var funAppendImage = function() { file = files[i]; if (file) { var reader = new FileReader() reader.onload = function(e) { html = html + '<div><p><strong>' + file.name + '</strong>'+ '<a href="javascript:" title="删除" data-index="'+ i +'">删除</a><br />' + '<img src="' + e.target.result + '" /></p>'+ '<span></span>' + '</div>'; i++; funAppendImage(); } reader.readAsDataURL(file); } else { //图片相关HTML片段载入 $("#preview").html(html); if (html) { //删除方法 $(".upload_delete").click(function() { ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]); return false; }); //提交按钮显示 $("#fileSubmit").show(); } else { //提交按钮隐藏 $("#fileSubmit").hide(); } } }; //执行图片HTML片段的载人 funAppendImage(); }
细心的你可能发现到上面的HTML元素中基本上都用到了i这个索引，作用是方便后面删除可以找到相应的元素。
然后，还有一个需要注意的就是删除事件——执行了ZXXFILE.funDeleteFile()方法，这是必须的，真正将图片从文件列表中删除，同时用来触发onDelete方法的回调。
onDelete方法
图片上传完毕或是删除之时执行飞方法。本实例是让其渐隐：
onDelete: function(file) { $("#uploadList_" + file.index).fadeOut(); }
onDragOver方法
文件拖到拖拽元素上时执行的方法，本实例就是增加了个类名，如下：
onDragOver: function() { $(this).addClass("upload_drag_hover"); }
onDragLeave方法
文件移出元素上时执行的方法，本实例就是去掉了个类名，如下：
onDragLeave: function() { $(this).addClass("upload_drag_hover"); }
onProgress方法
上传中触发的方法。本demo效果就是图片左上角有个有着圆角黑色半透明背景元素，里面的百分比值不断增加。代码：
onProgress: function(file, loaded, total) { var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%'; eleProgress.show().html(percent); }
onSuccess方法
当前图片上传成功后执行的方法。本demo就是提示返回的图片地址信息：
onSuccess: function(file, response) { $("#uploadInf").append(""<p>上传成功，图片地址是：" + response + ""</p>"); }
onFailure方法
图片上传嗝屁时尿出的方法。本demo为提示，然后图片浅透明：
onFailure: function(file) { $("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>"); $("#uploadImage_" + file.index).css("opacity", 0.2); }
onComplete方法
当所有图片都上传完毕之后，本实例页面把file控件的value值置空，同时按钮隐藏了：
onComplete: function() { //提交按钮隐藏 $("#fileSubmit").hide(); //file控件value置空 $("#fileImage").val(""); $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>"); }
PHP页面相关代码