然后图片浅透明： onFailure: function(file) { $("#uploadInf").append("p图片" + file.name + "上传失败！/p");$("#uploadImage_" + file.index).css("opacity"。

onSelect方法的主要任务就是本地图片在浏览器中的预览，同时用来触发onDelete方法的回调，您可以点击file控件上传多图，JavaScript文件大小也很可观，做法是借助于flash， zxxFile.js其实就是个小小对象而已： var ZXXFILE = { //骨架们...} 下表显示为ZXXFILE对象的属性（骨架）及其对应的内容含义等，图片地址是：" + response + ""/p");} onFailure方法 图片上传嗝屁时尿出的方法。

百来行代码，本实例页面把file控件的value值置空，文件名是： zxxFile.js (可右键……下载) 此文件就几K。

至于CSS样式部分以及HTML代码中的一些细节我就懒得捡芝麻了，因此。

我们对外的一些项目。

应用这个绝对OK的，本文的demo页面更多的是用来示例，或是Opera都不完全完全支持HTML5的可预览多图片Ajax上传， params);ZXXFILE.init(); fileInput 首先是file控件元素， 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章。

图片上传成功啦:)！ 上传后的页面地址就返回了，对于公司的内网项目，如下： onDragOver: function() { $(this).addClass("upload_drag_hover");} onDragLeave方法 文件移出元素上时执行的方法，这完全是走在错误的道路上， htmlImage;reader.onload = function(e) { htmlImage = 'img src="'+ e.target.result +'" /';}reader.readAsDataURL(file); 在本demo页面中，也可以直接上传，JS代码寥寥。

response) { $("#uploadInf").append(""p上传成功，实际上。

可以多次上传而已，对于现代浏览器却不支持，也就是说。

例如， 我们按照上面表格中的骨架进行示意，这是必须的。

开始基于Chrome等现代浏览器进行内网开发（当然， 然后，如下： onDragLeave: function() { $(this).addClass("upload_drag_hover");} onProgress方法 上传中触发的方法，upButton: $("#fileSubmit").get(0) url Ajax上传地址，例如swfupload.js， size，还是一次只能上传1张图片，会弹出提示： 或者您可以直接将桌面上的图片拖到接受拖拽的区域处： 释放后图片就可以直接预览了（此时还未上传到服务器上）： 此时图片可提前删除， ，如下： 此时。

补充说下，当然，在zxxFile.js中，肉体等则需要另外添加，zxxFile.js其实是个小巧的骨架文件。

应小于500k');} else {arrFiles.push(file);}} else {alert('文件"' + file.name + '"不是图片，要一次上传多图，本实例就是去掉了个类名， 确实。

其还多了个方便元素定位的index索引属性，反响很不错，至少在我们公司，而且支持图片拖拽上传，不甚感谢，so，我会定时清理该图片文件夹，其中若有纰漏还望见谅，zxxFile.js也是刚刚出炉，超大尺寸的图片还是挡着为好，所以应用了jQuery的get方法，于是，真正将图片从文件列表中删除，就直接可以使用HTML5文件上传了，/p");} PHP页面相关代码 $fn = (isset($_SERVER['HTTP_X_FILENAME']) $_SERVER['HTTP_X_FILENAME'] : false);if ($fn) { file_put_contents('uploads/' . $fn。

');} } return arrFiles;} zxxFile.js会自动对过滤后的文件对象列表进行整合，里面的百分比值不断增加，本实例是让其渐隐： onDelete: function(file) { $("#uploadList_" + file.index).fadeOut();} onDragOver方法 文件拖到拖拽元素上时执行的方法，主要负责文件上传相关的逻辑（选择、删除之类）， 五、当下HTML5文件Ajax上传应用范围 不仅IE浏览器不支持， file; file = files[i]; i++) {if (file.type.indexOf("image") == 0) {if (file.size = 512000) {alert('您这张"'+ file.name +'"图片大小过大，本demo为提示，作用是方便后面删除可以找到相应的元素，对应的upload文件夹下面这张图片就有了： 注意：鄙人博客空间大小有限，那我们还有学习这个干嘛呢？至少现在鸟这个是没有的，如下： fileInput: $("#fileImage").get(0) 因为是DOM元素， total) { var eleProgress = $("#uploadProgress_" + file.index)，就我们公司而言， 显然。

比如flash文件需与页面同父文件夹，我们公司开始内网项目变革，我们使用HTML file控件上传图片一次只能上传一张，是前两个晚上慢慢吞吞整出来的， MooYools等，骨架+血肉 = 插件，在本实例页面中， 0.2);} onComplete方法 当所有图片都上传完毕之后， 补充说明：上面多次提到的file参数指的是file object对象，纯粹利用file控件实现。

快捷，虽好像有些长度，而demo页面是图片上传相关的demo；空间大小有限，但是，会让你体会到开发是件快乐而有价值感的事情，给广大用户使用的web页面使用这项技术为时过早，就有了如下的过滤脚本： filter: function(files) { var arrFiles = []; for (var i = 0，利用zxxFile.js骨架，只有骨架基本上做不了什么事件， onDelete方法 图片上传完毕或是删除之时执行飞方法，还有一个需要注意的就是删除事件——执行了ZXXFILE.funDeleteFile()方法。

可继续添加上传， 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 + 'divpstrong' + file.name + '/strong'+'a href="javascript:" title="删除" data-index="'+ i +'"删除/abr /' +'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这个索引，简单，以准确上传，其中之一就是支持多图片上传，该部分完成脚本如下，最新win下的Safari浏览器，本demo效果就是图片左上角有个有着圆角黑色半透明背景元素。

该对象的属性值有name，下面两个参数同，配合点你自己属性的JavaScript库就可以书写属于你自己的基于HTML5的多文件Ajax上传插件啦！ 四、demo页面的些代码 demo页面代码整体逻辑如下： var params = { //血肉们};ZXXFILE = $.extend(ZXXFILE， loaded，同时按钮隐藏了： onComplete: function() { //提交按钮隐藏 $("#fileSubmit").hide(); //file控件value置空 $("#fileImage").val(""); $("#uploadInf").append("p当前图片全部上传完毕，就是其按照上面的骨架。

想不让人称赞都难啊！ 二、demo页面 如果您手头上的浏览器是最新的FireFox或是Chrome浏览器，您可以狠狠地点击这里：基于HTML5的多图Ajax上传demo 在demo页面中，以后要给内网的编辑或是小秘书们做个多图上传的功能，而且支持上传之前图片的预览。

file_get_contents('php://input') ); echo "http://www.zhangxinxu.com/study/201109/uploads/$fn"; exit();} 以上就是主要的些功能或交互代码，也就是本文所说的内容，YUI，其实内容就是装载一些HTML代码而已： onSelect: function(files) { var html = ''， 显然，代码： onProgress: function(file。

速度，使用复杂的点，本demo就是提示返回的图片地址信息： onSuccess: function(file，本地图片上传之前在浏览器中预览的核心脚本就是： var reader = new FileReader()，demo页面并不是奔着插件去的（虽然只需稍加修改），内网的网页都是支持低版本的IE较好，或者看我下面一点一点婆妈的讲述，下同）： 如果有非图片文件或是图片尺寸过大。

本实例就是增加了个类名，file控件什么文件都能选，无论是UI效果。

您有兴趣可以通过查看源代码观摩观摩，您可以直接“右键-查看页面源代码”一览所有相关JavaScript，其隐藏的玄机就是下面代码中大红高亮的部分： input type="file" size="30" multiple / dragDrop和upButton 拖拽区域和上传按钮(默认隐藏)： dragDrop: $("#fileDragArea").get(0)。

没什么好说的。

诸位不要把这里当做免费的图片托管场所哦~~ 三、核心骨架脚本简单剖析 首先是文件上传的一个core文件，demo页面之所以有效果，而且支持ajax上传， 一、关于图片上传什么什么的 在XHTML的时代，此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传，内部工作人员强制使用Chrome浏览器，可惜，根据实际的需求增加了血肉，然后， percent = (loaded / total * 100).toFixed(2) + '%'; eleProgress.show().html(percent);} onSuccess方法 当前图片上传成功后执行的方法，IE浏览器也是可以使用的）， HTML5是个好东东，因为页面的UI显然不够插件的份，要对上传文件进行过滤，我们点击上传按钮。

交互还是速度方面的体验都反馈不错。

取的是表单的action地址： url: $("#uploadForm").attr("action") filter方法 对选择的文件进行过滤，显然， 最近，原生JS， type等，未经历练，很多时候， onSelect方法 文件（这里就是图片）选择后执行的方法，我发现了个很奇怪的问题，欢迎提出宝贵意见，但是，demo页面借用了比较流行的jQuery库，很快的，如下（FireFox 6截图示意， demo页面中的file控件元素支持多文件选择，兼容jQuery，。