AjaxFileUpload檔案上傳元件(php+jQuery+ajax)
jQuery外掛AjaxFileUpload可以實現ajax檔案上傳,下載地址:http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js
主要引數說明:
1,url表示處理檔案上傳操作的檔案路徑,可以測試URL是否能在瀏覽器中直接訪問,如上:upload.php
2,fileElementId表示檔案域ID,如上:fileToUpload
3,secureuri是否啟用安全提交,預設為false
4,dataType資料資料,一般選json,javascript的原生態
5,success提交成功後處理函式
6,error提交失敗處理函式
需要了解相關的錯誤提示
1,SyntaxError: missing ; before statement錯誤
如果出現這個錯誤就需要檢查url路徑是否可以訪問
2,SyntaxError: syntax error錯誤
如果出現這個錯誤就需要檢查處理提交操作的PHP檔案是否存在語法錯誤
3,SyntaxError: invalid property id錯誤
如果出現這個錯誤就需要檢查屬性ID是否存在
4,SyntaxError: missing } in XML expression錯誤
如果出現這個錯誤就需要檢查檔案域名稱是否一致或不存在
5,其它自定義錯誤
大家可使用變數$error直接列印的方法檢查各引數是否正確,比起上面這些無效的錯誤提示還是方便很多。
示例程式碼:
=====================upload.html=======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajaxfileupload圖片上傳控制元件</title> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script> <script language="javascript"> jQuery(function(){ $("#buttonUpload").click(function(){ //載入圖示 /* $("#loading").ajaxStart(function(){ $(this).show(); }).ajaxComplete(function(){ $(this).hide(); });*/ //上傳檔案 $.ajaxFileUpload({ url:`upload.php`,//處理圖片指令碼 secureuri :false, fileElementId :`fileToUpload`,//file控制元件id dataType : `json`, success : function (data, status){ if(typeof(data.error) != `undefined`){ if(data.error != ``){ alert(data.error); }else{ alert(data.msg); } } }, error: function(data, status, e){ alert(e); } }) return false; }) }) </script> <body> <input id="fileToUpload" type="file" size="20" name="fileToUpload" class="input"> <button id="buttonUpload">上傳</button> <!--<img id="loading" src="loading.jpg" style="display:none;">--> </body> </html>
=====================upload.php=======================
$res["error"] = "";//錯誤資訊 $res["msg"] = "";//提示資訊 if(move_uploaded_file($_FILES[`fileToUpload`][`tmp_name`],"c:\test.jpg")){ $res["msg"] = "ok"; }else{ $res["error"] = "error"; } echo json_encode($res);
如何聯絡我:【萬里虎】www.bravetiger.cn
【QQ】3396726884 (諮詢問題100元起,幫助解決問題500元起)
【部落格】http://www.cnblogs.com/kenshinobiy/
相關文章
- ajaxfileupload 檔案上傳
- Angular元件-檔案上傳元件Angular元件
- 外掛 檔案上傳外掛 ajaxfileupload.js外掛JS
- springmvc + ajaxfileupload 實現非同步上傳檔案(圖片)SpringMVC非同步
- 使用ajaxfileupload.js上傳檔案成功之後,沒有執行success方法JS
- php檔案上傳之多檔案上傳PHP
- Bootstrap檔案上傳元件應用:bootstrap fileinputboot元件
- 單個檔案上傳和批量檔案上傳
- HTML5檔案上傳元件的深度剖析HTML元件
- 檔案上傳
- PHP+jQuery+Ajax實現多圖片上傳介紹PHPjQuery
- SpringMVC 單檔案上傳與多檔案上傳SpringMVC
- JavaWeb之實現檔案上傳與下載元件JavaWeb元件
- input file控制元件限制上傳檔案型別控制元件型別
- Spring webflux 整合 Mendmix 上傳元件上傳檔案到阿里雲騰訊雲SpringWebUX元件阿里
- 檔案上傳之三基於flash的檔案上傳
- Flask——檔案上傳Flask
- PHP上傳檔案PHP
- JavaScript 檔案上傳JavaScript
- Git上傳檔案Git
- YII檔案上傳
- 檔案上傳概述
- beego上傳檔案Go
- 上傳檔案流程
- 上傳EXCLE檔案
- PHP 檔案上傳PHP
- 檔案上傳漏洞
- MVC檔案上傳 - 使用Request.Files上傳多個檔案MVC
- 讓UpdatePanel支援檔案上傳(2):伺服器端元件伺服器元件
- 在jsp中使用smartupload元件上傳檔案 (轉)JS元件
- 使用webuploader元件實現大檔案分片上傳,斷點續傳Web元件斷點
- SpringMVC結合ajaxfileupload.js實現檔案無重新整理上傳SpringMVCJS
- Django檔案上傳 -- 適用於單一小檔案上傳Django
- 上傳檔案的陷阱
- HTTP檔案上傳原理HTTP
- 上傳檔案專題
- PHP 分片上傳檔案PHP
- Java Web 檔案上傳JavaWeb