AjaxFileUpload.js实现异步上传文件功能

做软工作业时，需要实现无刷新异步上传图片到服务器，于是想利用Ajax：

得到file的val，再post过去…

等真正实现的时候才发现，根本行不通。

于是翻来翻去找到一个封装好的js插件，可以实现异步上传文件。

AjaxFileUpload

这个插件的原理是创建隐藏的表单和iframe，然后用JS去提交，获得返回值。

语法

$.ajaxFileUpload([options])

参数说明

url　　　　　　　　　　 上传处理程序地址。
fileElementId　　　　　 需要上传的文件域的ID，即的ID。
secureuri　　　　　　　 是否启用安全提交，默认为false。
dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
success　　　　　　　　提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
error　　　　　　　　　 提交失败自动执行的处理函数。
data 　　　　　　　　　 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
type 　　　　　　　　　 当要提交自定义参数时，这个参数要设置成post

使用方法

引入jQuery与ajaxFileUpload插件（由api中心强力提供）

<script type="text/javascript" src="https://api.mayuko.cn/js/jquery.min.js"></script><script type="text/javascript" src="https://api.mayuko.cn/js/ajaxfileupload.js"></script>

扩展HTML代码

<td height="52" class="inputContent" ><div align="center">附件1<input type="file" name="upload_file" id="ss_upload_file1"></td><td colspan="3"><input type="button" name="Submit3" value="上 传" class="button" id="ss_file_upload"></td>

JS代码

$("#ss_file_upload").click(function(){  $.ajaxFileUpload({ url:'doajaxfileupload.php',//请求地址 secureuri:false,//是否需要安全协议 fileElementId:'ss_upload_file1',//file的ID dataType: 'text',//返回值类型，一般为json success: function(img_data1)//成功后执行 { $(ss_file1_url).attr("value",img_data1); alert("上传成功"); }, error:function(img_data1,status,e){  alert("上传失败");  } })})

PHP代码

后台就是进行上传操作啦，因为是课程设计所以我将图片上传到了七牛云存储中。

如何上传到七牛中？

<?php//echo var_dump($_FILES);//echo $_FILES['upload_file']['tmp_name'];$file_infor = array("status"=>'',"url"=>'');require_once("qiniu/io.php");require_once("qiniu/rs.php");$bucket = "";//你的bucket$key1 = $_FILES["upload_file"]["name"] ;$accessKey = '';//AK$secretKey = '';//SKQiniu_SetKeys($accessKey, $secretKey);$putPolicy = new Qiniu_RS_PutPolicy($bucket);$upToken = $putPolicy->Token(null);$putExtra = new Qiniu_PutExtra();$putExtra->Crc32 = 1;list($ret, $err) = Qiniu_PutFile($upToken, $key1,$_FILES["upload_file"]["tmp_name"], $putExtra);$url='bucket域名'.$key1;if ($_FILES["upload_file"]["error"] > 0){$file_infor["status"] = 'error';}else{$file_infor["status"] = 'success';$file_infor["url"] = $url;}echo $url;?>