|
by zhangxinxu from http://www. 一、以下为项目主页正文翻译（包括代码注释的翻译）： 1、Ajax Upload上传插件 浏览器迫使我们使用文件输入控件(<input type=”file” />)做上传，然而此控件的样式是不能修改的。此外，基于表单上传在流行的Ajax应用程序面前显得过时了。我们可以使用flash解决这个问题，但实际上JavaScript也能做的很出色。 Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面，可以使用任何的元素来显示文件选择窗口。它可以在所有主流的浏览器下工作，从2.0版本开始，不需要任何库运行。Ajax Upload文件上传插件不会污染任何命名空间，所以它与jQuery，Prototypejs，mootools其他JavaScript库兼容。 Demo实例 下载 问题，贡献和最新版本 2、如何去使用它？ 创建上载 <div id=”upload_button”>上传</div> 接下来，您应该创建Ajax上传实例。您可以使用以下代码创建最简单的形式： // 您必须在 DOM 准备好之后在创建它 //在jquery下使用 $(document).ready // prototype下为document.observe(“dom:loaded” new AjaxUpload(‘upload_button_id’, {action: ‘upload.php’}); 配置Ajax上传 new AjaxUpload(‘#upload_button_id’, { // 服务器端上传脚本 // 注意: 文件不允许上传到另外一个域上 action: ‘upload.php’, // 文件上传的名字 name: ‘userfile’, // 发送的附加数据 data: { example_key1 : ‘example_value’, example_key2 : ‘example_value2′ }, // 筛选后提交文件 autoSubmit: true, // 您希望从服务器返回的数据类型 // HTML (text) 和 XML 自动检测 // 当您使用JSON作为响应时很实用，在这种情况下就设置为 “json” // 也要设置服务器端的响应类型为text/html, 否则在IE6下是不工作的 responseType: false, // 文件选择后使用 // 当autoSubmit为disabled时很管用 // 您可以通过返回false取消上传 // @参数file为上传文件的文件名 // @参数extension为那个文件（后缀名） onChange: function(file, extension){}, // 文件上传时调用 // 您可以通过设置返回false 取消上传 // @参数file为上传文件的文件名 // @参数extension为那个文件（后缀名） onSubmit: function(file, extension) {}, // 当文件上传完成的时候调用 // 警告！不要使用”false”字符串作为服务器的响应 // @参数file 指上传的文件名 // @参数 response 指服务器的响应 onComplete: function(file, response) {} }); 注意：不要使用数据参数附加动态数据，就像“data: (txt:textfield.value）”，因为它将在AJAX Upload实例创建的时候分配数据且以后不会改变。如果你想文本框的传递的其他数据，使用在onSubmit回调函数中的SetData方法。 实例方法 //您可以使用这些方法来配置AJAX的上传 var upload = new AjaxUpload(‘#div_id’,{action: ‘upload.php’}); //例如当用户选择了一些东西，设置一些参数 upload.setData({‘example_key’: ‘value’}); //或者您可以在事件函数中直接使用这些方法 new AjaxUpload(‘div_id’, { action: ‘upload.php’, onSubmit: function() { //仅允许一个上传 this.disable(); } }); }); 3、如何访问上载的文件？ 您可以访问其他一些参数通过： 服务器端脚本 $uploaddir = ‘/var/www/uploads/’; $uploadfile = $uploaddir . basename($_FILES['userfile']['name']); if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { ColdFusion的文件上传。 （默认准系统解决方案） <cffunction name=”uploadFile” access=”remote” output=”false”> <cfargument name=”userFile”> <cffile action=”upload” fileField=”userFile” destination=”directory/path/on/server/”> <cfreturn “whatever”> </cffunction> 这里是一个ASPX处理程序，请进行修改以满足您的需要： using System; using System.Web; using System.IO; public class FileHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { string strFileName = Path.GetFileName(context.Request.Files[0].FileName); string strExtension = Path.GetExtension(context.Request.Files[0].FileName).ToLower(); string strSaveLocation = context.Server.MapPath(“Upload”) + “” + strFileName; context.Request.Files[0].SaveAs(strSaveLocation); context.Response.ContentType = “text/plain”; context.Response.Write(“success”); } public bool IsReusable { get { return false; } } } 4、如何只允许某些文件类型？ new AjaxUpload(‘#button2′, { action: ‘upload.php’, onSubmit : function(file , ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // 扩展名不允许 alert(‘错误：无效的文件扩展名！’); // 取消上传 return false; } } }); 5、如何工作的？ 6、授权与使用条款 二、我使用php制作的最简单的图片上传使用演示 首先，看图，简述操作。 代码请参考Demo或源文件。 您可以狠狠地单击这里：中文Demo页面 | 精简版源文件下载 说明： 三、结语 四、补充 先看下效果，截自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;
};
}原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.] （本篇完） 如果您觉得本文的内容对您的学习有所帮助： 相关文章
标签： Ajax, html, input, javascript, JavaScript库, php, 上传, 图片上传, 控件, 插件, 正则表达式, 翻译
|
|
|
