Ajax實現文件上傳功能(Spring MVC)_AJAX相關

來源:腳本之家  責任編輯:小易  

程序說明使用說明實例化時,第一個必要參數是file控件對象:new QuickUpload(file);第二個可選參數用來設置系統的默認屬性,包括屬性:默認值/說明parameter:{},/參數對象action:"",/設置actiontimeout:0,/設置超時(秒為單位)onReady:function(){},/上傳準備時執行onFinish:function(){},/上傳完成時執行onStop:function(){},/上傳停止時執行onTimeout:function(){}/上傳超時時執行還提供了以下方法:upload:執行上傳操作;stop:停止上傳操作;dispose:銷毀程序。var QuickUpload=function(file,options){this.file=$(file);this._sending=false;是否正在上傳this._timer=null;定時器this._iframe=null;iframe對象this._form=null;form對象this._inputs={};input對象this._fFINISH=null;完成執行函數extend(this,this._setOptions(options));};QuickUpload._counter=1;QuickUpload.prototype={設置默認屬性setOptions:function(options){this.options={/默認值action:"",/設置actiontimeout:0,/設置超時(秒為單位)parameter:{},/參數對象onReady:function(){},/上傳準備時執行onFinish:function(){},/上傳完成時執行onStop:function(){},/上傳停止時執行onTimeout:function(){}/上傳超時時執行};return$.extend(this.options,options|{});},上傳文件upload:function(){停止上一次上傳this.stop();沒有文件返回if!this.file|!this.file.value)return;可能在onReady中修改相關屬性所以放前面this.onReady();設置iframe,form和表單控件this._setIframe();this._setForm();this._setInput();設置超時if(this.timeout>0){this._timer=setTimeout($F.bind(this._timeout,this),this.timeout*1000);}開始上傳this._form.submit();this._sending=true;},設置iframesetIframe:function(){if!this._iframe){創建iframevar iframename="QUICKUPLOAD_"+QuickUpload._counter+,iframe=document.createElement($B.ie?iframe");iframe.name=iframename;iframe.style.display="none;記錄完成程序方便移除var finish=this._fFINISH=$F.bind(this._finish,this);iframe加載完后執行完成程序if($B.ie){iframe.attachEvent("onload",finish);} else {iframe.onload=$B.opera?function(){ this.onload=finish;}:finish;}插入bodyvar body=document.body;body.insertBefore(iframe,body.childNodes[0]);this._iframe=iframe;}},設置formsetForm:function(){if!this._form){var form=document.createElement('form'),file=this.file;設置屬性extend(form,{target:this._iframe.name,method:"post",encoding:"multipart/form-data});設置樣式D.setStyle(form,{padding:0,margin:0,border:0,backgroundColor:"transparent",display:"inline});提交前去掉formfile.form&$E.addEvent(file.form,"submit",$F.bind(this.dispose,this));插入formfile.parentNode.insertBefore(form,file).appendChild(file);this._form=form;}action可能會修改this._form.action=this.action;},設置inputsetInput:function(){var form=this._form,oldInputs=this._inputs,newInputs={},name;設置inputfor(name in this.parameter){var input=form[name];if!input){如果沒有對應input新建一個input=document.createElement("input");input.name=name;input.type="hidden;form.appendChild(input);}input.value=this.parameter[name];記錄當前inputnewInputs[name]=input;刪除已有記錄delete oldInputs[name];}移除無用inputfor(name in oldInputs){ form.removeChild(oldInputs[name]);}保存當前inputthis._inputs=newInputs;},停止上傳stop:function(){if(this._sending){this._sending=false;clearTimeout(this._timer);重置iframeif($B.opera){/opera通過設置src會有問題this._removeIframe();} else {this._iframe.src=";}this.onStop();}},銷毀程序dispose:function(){this._sending=false;clearTimeout(this._timer);清除iframeif($B.firefox){setTimeout($F.bind(this._removeIframe,this),0);} else {this._removeIframe();}清除formthis._removeForm();清除dom關聯this._inputs=this._fFINISH=this.file=null;},清除iframeremoveIframe:function(){if(this._iframe){var iframe=this._iframe;B.ie?iframe.detachEvent("onload",this._fFINISH):(iframe.onload=null);document.body.removeChild(iframe);this._iframe=null;}},清除formremoveForm:function(){if(this._form){var form=this._form,parent=form.parentNode;if(parent){parent.insertBefore(this.file,form);parent.removeChild(form);}this._form=this._inputs=null;}},超時函數timeout:function(){if(this._sending){ this._sending=false;this.stop();this.onTimeout();}},完成函數finish:function(){if(this._sending){ this._sending=false;this.onFinish(this._iframe);}}}www.anxorj.tw防采集請勿采集本網。

本文實例為大家分享了Ajax實現文件上傳的具體代碼,供大家參考,具體內容如下

jquery 實現多個上傳文件教程: 首先創建解決方案,添加jquery的js和一些資源文件(如圖片和進度條顯示等): 1 2 3 4 5 jquery-1.3.2.min.js jquery.uploadify.v2.1.0.js jquery.uploadify.v2.1.0.

前端表單 和 JQuery jsp/html代碼

ajax上傳文件實際上是獲取file標簽的值進行提交,js本身是無法讀取本地的文件資源的。

使用JQury

上傳的文件是沒有辦法和表單內容一起異步的,可考慮使用jquery的ajaxfileupload,或是其他的插件,異步上傳文件后,然后再對表單進行操作。

<script src="static/js/jquery-3.4.1.js"></script>

將文件讀入formDate中然后將要加的數據已鍵值對的形式加入formDate;var formdate=new formDate(document.getElementById('ID').files[0] formdate.append(name:'maomao');然后將formDate作為數據用ajax

前端表單

不知道你用的什么語言。C#里面可以用 ajax把文件地址傳到后臺然后用WebClient 上傳保存文件 WebClient myWebClient=new WebClient();strpath 服務器上路徑 FileStream fs=new FileStream(strpath

<form id="form-avatar" enctype="multipart/form-data"> <p>請選擇要上傳的文件:</p> <p><input type="file" name="file" /></p> <p><input id="btn-avatar" type="button" value="上傳" /></p></form>

ajax請求服務器

<script> function uploadfile(){ $.ajax({ url : "/url/upload", data: new FormData($("#form-avatar")[0]), type : "POST", // 告訴jQuery不要去處理發送的數據,用于對data參數進行序列化處理 這里必須false processData : false, // 告訴jQuery不要去設置Content-Type請求頭 contentType : false, success : function(json) { alert("執行成功"); }, error : function(json) { alert("執行失敗"); } }); } $("#btn-avatar").on("click",uploadfile);</script>

Conroller.java

@PostMapping("/upload") public void fileUpload2(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request) throws IOException { System.out.println("走了"); //上傳路徑保存設置 String path = request.getServletContext().getRealPath("/upload"); File realPath = new File(path); if (!realPath.exists()) { realPath.mkdir(); } //上傳文件地址 System.out.println("上傳文件保存地址:" + realPath); //通過CommonsMultipartFile的方法直接寫文件(注意這個時候) file.transferTo(new File(realPath + "/" + file.getOriginalFilename())); }

結果

HTTP File Serverhttp-file-server 是用 python 實現的 HTTP 文件服務器,支持上傳和下載文件。運行python file-server.py files 8001其中第一個參數 files 是存放文件的路徑,第二個參數 8001 是 HTTP 服務器端口。接口1.讀取文件GET/pathtofile/filename2.讀取文件夾下所有文件(已經忽略隱藏文件)GET/path返回文件列表為 JSON 數組,文件名末尾帶有/的表示是文件夾。filename 為文件名,mtime 為修改時間。[{"filename":"f1.txt內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • spring mvc+ajax進行信息驗證的方法
  • springmvc完成ajax功能實例詳解
  • springmvc+ajax+formdata上傳圖片代碼實例
  • 利用springmvc和ajax實現文件上傳功能
  • springmvc+jquery實現ajax功能
  • 解決springmvc接收不到ajaxpost參數的問題
  • spring mvc ajax技術實現原理解析
  • [asp.net ajax] ecmascript基礎類以及asp.net ajax對類&lt;o
  • 用ajax來控制書簽和回退按鈕的代碼
  • ajax發送和接收二進制字節流數據的方法
  • ajax學習全套(最全最經典)
  • 實例代碼講解ajax實現的無刷新分頁
  • ajaxui:滑動條
  • 使用ajax(包含正則表達式)驗證用戶登錄的步驟
  • ajax的原理—如何做到異步和局部刷新【實現代碼】
  • 切記ajax中要帶上antiforgerytoken防止csrf攻擊
  • ajax和webservice實現省市縣三級聯動具體代碼
  • 怎么用ajax實現上傳文件的功能
  • ajax如何 實現 文件上傳
  • ajax上傳文件是怎么實現的
  • 怎樣利用ajax實現多個文件上傳
  • 如何用Ajax實現多文件上傳
  • ajax上傳文件是怎么實現的
  • ajax怎么提交帶文件上傳表單
  • ajax實現文件上傳同時傳一個字符能做到么
  • 有辦法實現無刷新上傳文件嗎?不使用包含方式在。。。類似使用AJAX
  • 怎么樣通過jQuery Ajax實現上傳文件
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁ajax相關spring mvc+ajax進行信息驗證的方法springmvc完成ajax功能實例詳解springmvc+ajax+formdata上傳圖片代碼實例利用springmvc和ajax實現文件上傳功能springmvc+jquery實現ajax功能解決springmvc接收不到ajaxpost參數的問題spring mvc ajax技術實現原理解析[asp.net ajax] ecmascript基礎類以及asp.net ajax對類&lt;o用ajax來控制書簽和回退按鈕的代碼ajax發送和接收二進制字節流數據的方法ajax學習全套(最全最經典)實例代碼講解ajax實現的無刷新分頁ajaxui:滑動條使用ajax(包含正則表達式)驗證用戶登錄的步驟ajax的原理—如何做到異步和局部刷新【實現代碼】切記ajax中要帶上antiforgerytoken防止csrf攻擊ajax和webservice實現省市縣三級聯動具體代碼jquery ajax 向后臺傳遞數組參數ajax readystate的五種狀態詳解ajax中的async屬性值之同步和異步jquery實現ajax定時刷新局部頁面ajax傳遞多個參數具體實現jquery ajax中使用serialize()方ajax獲取數據中文亂碼問題最簡單自己動手打造ajax圖片上傳(網上沒ajax 緩存問題的兩種解決方法(ieajax獲取數據然后顯示在頁面的實ajaxrequest.js ajaxrequest 0.7最新版 使jsp+ajax 添加、刪除多選框ajax簡單的異步交互及ajax原生編寫ajax請求session失效問題ajax 上傳圖片并預覽的簡單實現零基礎學習ajax之制作自動校驗的表單使用html5中postmessage知識點解決ajax中一個簡單的asp+ajax留言本源碼下載dwr util.js 學習筆記 整理
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载