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.zgxue.com防采集请勿采集本网。

本文实例为大家分享了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.zgxue.com请勿采集。


  • 本文相关:
  • 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.zgxue.com All Rights Reserved