AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:58:17

AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能:做軟工作業(yè)時(shí)，需要實(shí)現(xiàn)無(wú)刷新異步上傳圖片到服務(wù)器，于是想利用Ajax：得到file的val，再post過(guò)去… 等真正實(shí)現(xiàn)的時(shí)候才發(fā)現(xiàn)，根本行不通。于是翻來(lái)翻去找到一個(gè)封裝好的js插件，可以實(shí)現(xiàn)異步上傳文件。 AjaxFileUpload 這個(gè)插件的原理是創(chuàng)建隱藏的表單和

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能:做軟工作業(yè)時(shí)，需要實(shí)現(xiàn)無(wú)刷新異步上傳圖片到服務(wù)器，于是想利用Ajax：得到file的val，再post過(guò)去… 等真正實(shí)現(xiàn)的時(shí)候才發(fā)現(xiàn)，根本行不通。于是翻來(lái)翻去找到一個(gè)封裝好的js插件，可以實(shí)現(xiàn)異步上傳文件。 AjaxFileUpload 這個(gè)插件的原理是創(chuàng)建隱藏的表單和

使用方法

引入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 = '';//SK
Qiniu_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;
?>

$_FILES是一個(gè)數(shù)組：

array (
‘upload_file' =>
array (
‘name' => ‘733626970332872971.jpg',
‘type' => ‘image/jpeg',
‘tmp_name' => ‘C:\\Windows\\Temp\\phpF203.tmp',
‘error' => 0,
‘size' => 210744,
),
)

這樣前臺(tái)就可以接收到上傳圖片之后的url值并進(jìn)行顯示操作了。

一般來(lái)說(shuō)，AjaxFileUpload的返回類型是json格式，可是在測(cè)試的時(shí)候前臺(tái)一直無(wú)法解析json數(shù)據(jù)，所以無(wú)解之后就換成text數(shù)據(jù)了。

錯(cuò)誤提示

1.Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method ‘handleError'

這是因?yàn)楦甙姹镜膉Query中取消了handleError方法，在ajaxfileupload.js中加入該方法就可以啦。 ;)

handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}

// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
}

2.success: function(data)中data為空值

應(yīng)該是json數(shù)據(jù)的問(wèn)題，我的解決方法是設(shè)置返回?cái)?shù)據(jù)的類型是 text，用alert(data +”:” + data.length); 觀察返回的數(shù)據(jù)是否有效。

3.一直跳轉(zhuǎn)到error方法中

當(dāng)執(zhí)行if（type==”json”) eval(“data = “+data);會(huì)拋出異常，導(dǎo)致在處理異常的時(shí)候?qū)tatus = “error” 因此一直執(zhí)行error方法。

將ajaxfileupload.js中uploadHttpData: function( r, type ) 方法的 eval(“data = “+data+” “)改為 eval(“data = \” “+data+” \” “);

4.SyntaxError: syntax error錯(cuò)誤

檢查處理提交操作的服務(wù)器后臺(tái)處理程序是否存在語(yǔ)法錯(cuò)誤。

5.change第二次失效

綁定change事件，實(shí)現(xiàn)選擇圖片后自動(dòng)上傳，但是觸發(fā)一次change事件后，下次就不會(huì)再觸發(fā)change事件。

原因：由于ajaxFileUpload把原來(lái)的file元素替換成新的file元素，所以之前綁定的change事件就失效了。

解決方法：在 $.ajaxFileUpload({option})中的回調(diào)函數(shù)里重新綁定change事件。

$("#upload_file").change(function(){ 
 UploadImg();
});
UploadImg = function() {
 $(window).bind('beforeunload',function(){return '正在上傳，確定離開(kāi)此頁(yè)面嗎？';});
 $('#loading').attr('style','display:block;')
 $.ajaxFileUpload({
 url:'upload_ajax.php',
 secureuri:false,
 fileElementId:'upload_file',
 dataType: 'text',
 success: function(data)
 {
 $('#loading').attr('style','display:none;');
 if(data == 0){
 $("body").overhang({
 type: "error",
 message: "上傳失敗，CODE:00020"
 });
 }
 else if(data == 1){
 $("body").overhang({
 type: "success",
 message: "上傳成功！"
 });
 setTimeout(function(){
 window.location.reload(); 
 },1000);

 }

 else{
 $("body").overhang({
 type: "error",
 message: "格式錯(cuò)誤，僅支持jpg,png,gif"
 });
 }
 $(window).unbind('beforeunload');
 $("#upload_file").change(function () {
 UploadImg();
 });

 },
 error:function(data,status,e){ 
 $("body").overhang({
 type: "error",
 message: "上傳失敗，CODE:00031"
 });
 }
 }) 
}

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：圖片 js 上傳圖片

熱門焦點(diǎn)

AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能

最新推薦

猜你喜歡

熱門推薦