ajaxfileupload.js上传插件的使用(php版)
2017-10-13 16:04
471 查看
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插件实现ajax无刷新上传文件
- js使用AjaxFileupload插件实现文件上传
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
- 使用ajaxfileupload.js插件实现Ajax方式上传文件
- 使用ajaxfileupload.js实现ajax上传文件php版
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用ajaxfileupload.js实现ajax上传文件php版
- 关于ajaxfileupload.js插件及其多上传的使用
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 使用AjaxFileUpload.js实现异步文件上传示例
- jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
- ASP.NET- 无刷新上传使用jQuery插件之ajaxFileUpload
- ajaxFileUpload.js插件支持多文件上传的方法
- ajaxfileupload.js 文件上传插件之改进
- jquery插件--ajaxfileupload.js上传文件原理分析
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
- Struts2中的异步提交(ajaxfileupload异步上传插件的使用)
- 关于ajaxfileupload.js上传图片使用历程(struts2)
- php jquery之ajax上传文件 ajaxfileupload.js