ajaxfileupload.js上传插件的使用(php版)
来源:互联网 发布:中巴公路 知乎 编辑:程序博客网 时间:2024/05/20 04:27
ajaxfileupload.js的使用(php版,非常实用)
一、先对ajaxFileUpload插件的语法参数进行讲解
原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事件调用其绑定的方法,在绑定的方法中获取iframe中服务器返回的数据体(支持的普通文本,json,xml,script, html)
语法:$.ajaxFileUpload([options])
参数说明:
1,url 上传处理程序地址,也就是我发送给服务器端所要处理上传的地址。
2,fileElementId 需要上传的文件域的ID,即的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个很有用,比如你上传图片的同时想把图片名也一起传过去,可以用这个参数去实现。
8,type 当要提交自定义参数时,这个参数要设置成post
二、接下来我们看看如何去使用
1、先引入ajaxFileUpload这个插件。
<script src="jquery-1.11.1.js" type="text/javascript"></script><script src="ajaxfileupload.js" type="text/javascript"></script>
这里我用的是jq1.11.1版本,网上有说jq版本与ajaxfileupload的版本要对应才不会有异常报错,反正我现在这个没错误。
2、贴上HTML的代码。
<div data-role="fieldcontain" class="upload-box"> <label for="id_photos"><span class="red">* </span>您的有效证件照:</label> <input type="file" id="id_photos" name="id_photos" value="上传" style="filter:alpha(opacity=10);-moz-opacity:10;opacity:10;" /> <p style="margin-top:0.5em;color:#999;font-size:11pt;">说明:请上传手持证件的半身照,请确保照片内证件信息清晰可读。</p></div><div class="id_photos" ></div>
此处主要的是
<input type="file" id="id_photos" name="id_photos" value="上传">
这一句代码,其他的不用管,因为这里我是在手机端,用的是jqueryMobile插件。
3、到js代码进行处理。
$(document).bind('pageinit', function(){ //照片异步上传 $('#id_photos').change(function(){ //此处用了change事件,当选择好图片打开,关闭窗口时触发此事件 $.ajaxFileUpload({ url:'/uploader/', //处理图片的脚本路径 type: 'post', //提交的方式 secureuri :false, //是否启用安全提交 fileElementId :'id_photos', //file控件ID dataType : 'json', //服务器返回的数据类型 success : function (data, status){ //提交成功后自动执行的处理函数 if(1 != data.total) return; //因为此处指允许上传单张图片,所以数量如果不是1,那就是有错误了 var url = data.files[0].path; $('.id_photos').empty(); //此处效果是:当成功上传后会返回一个json数据,里面有url,取出url赋给img标签,然后追加到.id_photos类里显示出图片 $('.id_photos').append('<img src="'+url+'" value="'+url+'" style="width:80%" >'); //$('.upload-box').remove(); }, error: function(data, status, e){ //提交失败自动执行的处理函数 alert(e); } })});
这里我对每一行的代码都基本写上了注释方便大家理解。流程就是上传图片给uploader.php去处理,处理成功返回json数据,然后在json中取出url值,将其赋给img标签里,然后将img标签追加带页面显示出来。
这里我附上json返回的数据:
{ "total": 1, "success": 1, "files": [ { "srcName": "3.jpg", "error": 0, "size": 10715, "type": "image/jpeg", "success": true, "path": "http://m.kellyblog.com/upload/20150528/857f4a35664b4a665e713322306d73b2.0x124x126.jpg", "width": 124, "height": 126 } ]}
4、看看PHP是如何处理的
foreach ($_FILES as $item) { $index = count($files); $files[$index]['srcName'] = $item['name']; //上传图片的原名字 $files[$index]['error'] = $item['error']; //和该文件上传相关的错误代码 $files[$index]['size'] = $item['size']; //已上传文件的大小,单位为字节 $files[$index]['type'] = $item['type']; //文件的 MIME 类型,需要浏览器提供该信息的支持,例如"image/gif" $files[$index]['success'] = false; //这个用于标志该图片是否上传成功 $files[$index]['path'] = ''; //存图片路径 // 接收过程有没有错误 if($item['error'] != 0) continue; //判断图片能不能上传 if(!is_uploaded_file($item['tmp_name'])) { $files[$index]['error'] = 8000; continue; }
这里只给出主要代码,一般只要获取到图片信息就够了,其它处理都很简单。
- ajaxfileupload.js上传插件的使用(php版)
- 关于ajaxfileupload.js插件及其多上传的使用
- js使用AjaxFileupload插件实现文件上传
- 使用ajaxfileupload.js上传文件(php)
- jQuery上传文件插件AjaxFileUpload的使用
- ajaxFileUpload.js插件使用
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用ajaxfileupload.js插件实现Ajax方式上传文件
- 利用Jquery ajaxfileupload插件+PHP 进行文件的上传
- jquery ajaxFileUpload.js插件支持多文件上传的方法
- 使用ajaxfileupload.js上传文件
- ajaxfileupload.js 文件上传插件之改进
- 上传文件(可用ajaxfileupload.js插件)
- ajaxFileUpload插件的使用 ------------------插件
- ajaxFileUpload.js 插件的demo
- ajaxfileupload.js的使用
- ajaxFileUpload 异步上传文件配合PHP的使用
- (32位汇编 十)SI/DI/BP/SP/IP/CS/DS/ES/SS
- (32位汇编 八)标志寄存器
- (32位汇编 九)ADC/SBB/XCHG/MOVS/STOS/REP
- (32位汇编 十一)修改EIP的值
- (32位汇编 七)堆栈/栈(stack)
- ajaxfileupload.js上传插件的使用(php版)
- Java常见集合框架(十一):Set之LinkedHashSet、CopyOnWriteArraySet
- 在linux环境下安装php扩展
- git
- vue 2.8.2版本配置刚进入时候的默认页面
- BZOJ4182 shopping 点分治+多重背包单调队列优化
- java语言输出金额x的中文大写形式字符串
- 详解Android的事件分发机制
- Symfony框架 & Sylius电商系统的Linux终端命令(bin/console打头的命令)如何使用XDebug单步调试