使用AjaxFileUpload.js实现文件异步上�

使用AjaxFileUpload.js实现文件异步上�

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。

ajax是无法提交文件的,所以在上传图片并预览的时候,我们常常使用Ifame的方法实现看似异步的效果。可是这样总不是非常方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交。

html:

<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />

js:

$.ajaxFileUpload({
		          url:'${pageContext.request.contextPath}/Manage/BR_restorePic.action',            //须要链接到server地址
		            secureuri:false,
		          fileElementId:'file_upload',                        //文件选择框的id属性
		            dataType: 'text',                                     //server返回的格式,能够是json、xml
		          success: function (data, status)            //相当于java中try语句块的使用方法
		           {      
		                	
		               	$('#restoreDialog').html(data);
		                

		                	
		                	
		                    //alert(data);
		         },
		         error: function (data, status, e){            //相当于java中catch语句块的使用方法
		                                   
		                       $('#restoreDialog').html("上传失败,请重试");            
		         }
            	});

这种方法还会出现一个问题,就是input仅仅能使用一次的问题,input第二次的onchange将不会被运行,这应该是与浏览器的有关,解决的方法就是替换这个input

像这样:

 

$('#file_upload').replaceWith('<input type="file" name="upload" hidden="hidden" id="file_upload" accept=".zip" />');

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/118170.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ASP.NET的命名空间

    ASP.NET的命名空间ASP.NET的命名空间   命名空间(namespace)   ASP.NET中的各种语言使用的一种代码组织的形式。   通过命名空间来分类,区别不同的代码功能,也是ASP.NET中所有类的完全名称的一部分。   命名空间不过是数据类型的一种组合方式,但是,命名空间中所有数据类型的名称,都会自动加上该命名空间的名字作为前缀。 命名空间还可以相互嵌套

  • 微信小程序 小程序源码包括后台完整版分享

    微信小程序 小程序源码包括后台完整版分享需要的留邮箱免费发!版权归作者所有,任何形式转载请联系作者。作者:执波仔丶(csdn博客)最新收集的60个微信小程序源码分享+开发视频教程最新收集的60个微信小程序源码分享+开发视频教程最新收集的60个微信小程序源码分享+开发视频教程小程序源码使用教程(源码文件夹自带安装教程,本教程不一定通用):第一步:百度搜索下载微信开发者工具(最新1.02.1801081,支持mac)第二步:打开开发工具客…

  • goland 2021.12激活【最新永久激活】

    (goland 2021.12激活)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~3…

  • PostgreSQL 临时表[通俗易懂]

    PostgreSQL 临时表[通俗易懂]转载自: http://blog.163.com/digoal@126/blog/static/1638770402012101575032326/SQL标准中临时表是一次创建,以后使用的时候无须再次创建的.并且每个会话保持各自的数据.但是在PostgreSQL中,临时表的使用有所改变.1.临时表在会话结束后会自动删除(或者在事务结束后删除oncommitdrop)

    2022年10月25日
  • 什么是Web Service(SOAP)?

    什么是Web Service(SOAP)?SOAP请求(SimpleObjectAccessProtocol,简单对象访问协议)是HTTPPOST的一个专用版本,遵循一种特殊的XML消息格式,Content-type设置为:text/xml,任何数据都可以XML化。SOAP:简单对象访问协议。SOAP是一种轻量的,简单的,基于XML的协议,它被设计成在web上交换结构化的和固化的信息。SOAP可以和现存的许多因特网协议和格式结合…

  • Jenkins安装_jenkins安装与配置

    Jenkins安装_jenkins安装与配置前言jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境。环境准备:mac/Linuxdockerdocker拉去jenkins镜像先下载jenkins镜

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号