使用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" />');

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

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

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • activity生命周期_软件生命周期八个阶段

    activity生命周期_软件生命周期八个阶段子曰:溫故而知新,可以為師矣。《論語》学习技术也一样,对于技术文档或者经典的技术书籍来说,指望看一遍就完全掌握,那基本不大可能,所以我们需要经常回过头再仔细研读几遍,以领悟到作者的思想精髓。近来回顾了一下关于Activity的生命周期,参看了相关书籍和官方文档,也有了不小的收获,对于以前的认知有了很大程度上的改善,在这里和大家分享一下。熟悉javaEE的朋友们都了解servlet技术,

    2022年8月16日
  • Maven–如何下载JSONObject相关依赖架包

    Maven–如何下载JSONObject相关依赖架包一、开发场景Java开发当中经常需要Json格式的数据,这就用到JSONObject类,本文章只提供以下两种JSONObject对应架包的下载方式。com.alibaba.fastjson.JSONObject(依赖1个架包fastjson-1.2.28.jar)net.sf.json.JSONObject(依赖6个架包commons-beanutils-1.9.3.jar、commons-c…

    2022年7月12日
  • 闭包常见面试题_闭包的特点

    闭包常见面试题_闭包的特点理解:什么是闭包?1.密闭的容器,类似set/map容器,用来存储数据2.闭包是一个对象,存放数据的格式:key:value闭包形成的条件1.函数嵌套2.内部函数引用外部函数functionfun(){varcount=1;functionfun2(){//条件1:函数嵌套//形成条件2:内部函数引用外部函数console.log(count);}}fun();已经形成了闭包,以键值对的形式保存数据在外部.

    2022年8月30日
  • PhpStorm 2021.4.11 x64激活码【在线破解激活】

    PhpStorm 2021.4.11 x64激活码【在线破解激活】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
  • mysql 数据库字符串转时间_mysql时间与字符串之间相互转换详解

    mysql 数据库字符串转时间_mysql时间与字符串之间相互转换详解1.时间转字符串DATE_FORMAT(日期,格式字符串)SELECTDATE_FORMAT(NOW(),’%Y-%m-%d%H:%i:%s’);2.字符串转时间STR_TO_DATE(字符串,日志格式)SELECTSTR_TO_DATE(‘2019-01-2016:01:45′,’%Y-%m-%d%H:%i:%s’);3.时间转时间戳selectunix_timestamp(no…

    2022年6月2日
  • 笛卡尔积的解释和作用[通俗易懂]

    笛卡尔积的解释和作用[通俗易懂]一:笛卡尔积的解释例给出二个域:假设集合A={a,b},集合B={0,1,2},则两个集合的笛卡尔积为{(a,0),(a,1),(a,2),(b,0),(b,1),(b,2)}。。类似的例子有,如果A表示某学校学生的集合,B表示该学校所有课程的集合,则A与B的笛卡尔积表示所有可能的选课情况。[编辑本段]笛卡尔积的运算性质  由于有序对&lt;x,y&gt;中x,y的位置是确定的,因此A×B…

    2022年7月11日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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