做軟工作業(yè)時(shí)，需要實(shí)現(xiàn)無刷新異步上傳圖片到服務(wù)器，于是想利用Ajax：

得到file的val，再post過去…

等真正實(shí)現(xiàn)的時(shí)候才發(fā)現(xiàn)，根本行不通。

于是翻來翻去找到一個(gè)封裝好的js插件，可以實(shí)現(xiàn)異步上傳文件。

AjaxFileUpload

這個(gè)插件的原理是創(chuàng)建隱藏的表單和iframe，然后用JS去提交，獲得返回值。

語法

$.ajaxFileUpload([options])

參數(shù)說明

url　　　　　　　　　　 上傳處理程序地址。
fileElementId　　　　　 需要上傳的文件域的ID，即的ID。
secureuri　　　　　　　 是否啟用安全提交，默認(rèn)為false。
dataType　　　　　　　 服務(wù)器返回的數(shù)據(jù)類型。可以為xml,script,json,html。如果不填寫，jQuery會(huì)自動(dòng)判斷。
success　　　　　　　　提交成功后自動(dòng)執(zhí)行的處理函數(shù)，參數(shù)data就是服務(wù)器返回的數(shù)據(jù)。
error　　　　　　　　　 提交失敗自動(dòng)執(zhí)行的處理函數(shù)。
data 　　　　　　　　　 自定義參數(shù)。這個(gè)東西比較有用，當(dāng)有數(shù)據(jù)是與上傳的圖片相關(guān)的時(shí)候，這個(gè)東西就要用到了。
type 　　　　　　　　　 當(dāng)要提交自定義參數(shù)時(shí)，這個(gè)參數(shù)要設(shè)置成post

使用方法

引入jQuery與ajaxFileUpload插件（由api中心強(qiáng)力提供）

<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>

擴(kuò)展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',//請(qǐng)求地址 secureuri:false,//是否需要安全協(xié)議 fileElementId:'ss_upload_file1',//file的ID dataType: 'text',//返回值類型，一般為json success: function(img_data1)//成功后執(zhí)行 { $(ss_file1_url).attr("value",img_data1); alert("上傳成功"); }, error:function(img_data1,status,e){  alert("上傳失敗");  } })})

PHP代碼

后臺(tái)就是進(jìn)行上傳操作啦，因?yàn)槭钦n程設(shè)計(jì)所以我將圖片上傳到了七牛云存儲(chǔ)中。

如何上傳到七牛中？

<?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;?>