Ajax Upload多文件上传插件翻译及中文演示(2)_H5之家

最好的方法是检查在onSubmit回调函数选定的文件类型，并让函数返回false取消上传选中的无效的文件。但是不要忘记添加一个服务器端的安全检查。

new AjaxUpload(‘#button2′, { action: ‘upload.php’, onSubmit : function(file , ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // 扩展名不允许 alert(‘错误：无效的文件扩展名！’); // 取消上传 return false; } } });

学过了

5、如何工作的？

插件创建隐形的文件域控件在您提供的按钮上。所以，当用户点击您的按钮时，正常的文件选择窗口就会显示。之后用户选择一个文件，插件提交包含文件输入框控件的表单到一个iframe中。因此，这不是真正的Ajax上传，但同时带来了用户体验。

学过了

6、授权与使用条款

学过了

使用php制作的最简单的图片上传使用演示

首先，看图，简述操作。
1. 单击按钮，选择图片

2. 选择数张图片，例如这里我选了三张，选完及上传，结果如下

3. 结果在uploads文件夹下面就可以看到刚刚上传的三张图片了

代码请参考Demo或源文件。

您可以狠狠地单击这里：中文Demo页面 | 精简版源文件下载

说明：
1、源文件下载至本地，需要修改文件处理php页面代码的路径。需要将此路径对应于您新建的用以存放图片或其他文件的文件夹；
2、源文件与在线Demo有差别，源文件中的Demo无logo，排版，广告等，纯粹的Demo，代码简洁，应该会有帮助。
3、本实例是能上传图片，您可以去掉正则判断，使支持其他格式。
4、本实例没有使用JavaScript库做辅助，这是由于本身Ajax Upload文件上传插件就是纯粹的JavaScript写的，所以不依赖于任何的JavaScript库，可以直接使用JavaScript实现多文件上传。
5、在线Demo请勿上传敏感的图片，谢谢合作。

学过了

结语

这款Ajax Upload多文件上传插件还是很受用的，本文将原项目页面内容原封不动的翻译过来了，时间仓促，翻译或书写可能有不准确，欢迎留言指正。原项目的Demo页面有些乱，所以我自己用JavaScript+php实现了非常精简的文件上传演示页面，希望对您有所帮助。

学过了

补充

不少人问我，有没有支持file类型input的方法。我今天想了想，改了改，实现了一个类似<input type=”file” />的效果。
首先，你需要调用修改后的JavaScript文件，点击这里（右键下载）：修改版JS。

先看下效果，截自IE6：

截图张鑫旭-鑫空间-鑫生活

原理如下，使用<input type=”text” id=”uploadUrl”> + <input type=”button”>的组合模拟<input type=”file” />的表现。然后，当隐藏的file文件域发生改变的时候，让其值等于<input type=”text”>的值就可以了。

具体效果您可以狠狠地点击这里：效果demo

至于代码部分，要在JavaScript的最后添加类似于下面的几行代码就可以了。

var oUrl = document.getElementById("uploadUrl"); //要显示本地图片路径的文本框 var oFile = document.getElementById("absFileInput"); if(oFile){ oFile.onchange = function(){ oUrl.value = this.value; }; }

转载自张鑫旭-鑫空间-鑫生活

加入1KE学习俱乐部 1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
长按图片“识别图中二维码” 加小K为好友！申请入会即可！微信扫一扫加小K为好友！申请入会即可！