今天用到了一个jquery的上传插件，一如既往的帅和简单，贡献者的地址为：http://www.phpletter.com/Our-Projects/AjaxFileUpload/
1.How to use it?
1.引入jquery.js文件和ajaxfileupload.js文件
2. 创建一个上传按钮被点击时执行的函数，如：
- <br />
- function ajaxFileUpload()<br />
- {<br />
- //设置开始上传和结束上传时的简单动画效果<br />
- $("#loading")<br />
- .ajaxStart(function(){<br />
- $(this).show();<br />
- })<br />
- .ajaxComplete(function(){<br />
- $(this).hide();<br />
- });<br />
- /*<br />
- ajax方法设置<br />
- url: 处理上传文件的脚本文件地址<br />
- fileElementId: 客户端文件地址输入框的id，这个id还将作为脚本文件中$_FILES Array()的索引名<br />
- dataType: 返回的数据类型，json或者xml类型<br />
- secureuri:是否采用安全协议，一般为false<br />
- success: ajax complete后执行的回调函数<br />
- error: 发生调用错误时的错误处理回调函数<br />
- */<br />
- $.ajaxFileUpload<br />
- (<br />
- {<br />
- url:'doajaxfileupload.php',<br />
- secureuri:false,<br />
- fileElementId:'fileToUpload',<br />
- dataType: 'json',<br />
- success: function (data, status)<br />
- {<br />
- if(typeof(data.error) != 'undefined')<br />
- {<br />
- if(data.error != '')<br />
- {<br />
- alert(data.error);<br />
- }else<br />
- {<br />
- alert(data.msg);<br />
- }<br />
- }<br />
- },<br />
- error: function (data, status, e)<br />
- {<br />
- alert(e);<br />
- }<br />
- }<br />
- )<br />
- return false;<br />
- }<br />
2.Where to dowload?
官方的下载地址为：下载链接
3.Demo Available From Here
在这里可以观看到最新的demo
4.一些要注意的地方
- 需要注意 form的enctype，必须为”multipart/form-data”才能正确的向服务端发送数据
- 为了安全原因，在doajaxfileupload.php程序文件中，作者unlink了demo中上传的文件，也即上传后即删除了，所以会出现看不到上传文件的情况，注释掉即可
- 给出的demo中，上传到了默认的临时文件夹，为了正常使用，应该move回来到你指定的目录，因此需要修改doajaxfileupload.php文件，在$msg = $_FILES['fileToUpload']['name'];之后添加如下代码：
- <br />
- $dir="/web/popup/popup_img/";<br />
- $f=$dir.$_FILES['fileToUpload']['name'];<br />
- if(!move_uploaded_file($_FILES['fileToUpload']['tmp_name'],$f))<br />
- {<br />
- $error = "failed";<br />
- $msg = "move file failed";<br />
- }<br />
- 可以修改ajaxFileUpload的回调函数以满足自身的应用需要
够简单吧，用好了这些开源插件，可以很显著的提升工作效率，使得工作本身多关注于业务逻辑而非技术实现细节，当然，良好的程序阅读和调试功底也是必需的，个人觉得这些基本功的培养更多的放在个人业余时间当作研究来提升更好。
5 Comments for this post
有空也发到iweb的博客里面去吧
回复
嗯，要是iweb博客对外公开就太好了
回复
謝謝你這篇文章, 幫我解決我一直找不著上傳後的檔案.
回复
非常不错的博客~
回复
[...] jQuery插件之让AjaxFileUpload支持多文件上传 Aug.24, 2009 in javascript AjaxFileUpload是一个基于jquery开发的文件上传插件，之前有写过一篇使用方面的文章，颇受欢迎，后因业务需要，需要在一个页面上传多个文件，这才意识到AjaxFileUpload只是支持单文件的，那么改造一下吧，使其支持多文件上传（只做比较简单的示例，您完全可以将其改造得更为强大）。另外对于AjaxFileUpload的基本使用和需要注意的问题请参考文章：jquery插件之AjaxFileUpload <input id="thumbnail" class="upfileText" name="thumbnail" size="30" type="file" /> [...]
Leave a comment