使用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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Dos Copy XCopy「建议收藏」

    Dos Copy XCopy「建议收藏」1、Copyhttp://baike.baidu.com/view/596598.htm无法实现copy不覆盖目标目录下同名文件 只是不弹出对话框而已,会覆盖文件的  /Y不使用确认是否要覆盖现有目标文件  的提示。  /-Y使用确认是否要覆盖现有目标文件  的提示。 下面代码保存为test.vbs双击即可运行

    2022年7月18日
    15
  • linux的vim显示行号(vim添加行号)

    打开vim的配置文件/etc/vim/vimrcsudovim/etc/vim/vimrc然后找到#setnumber,把注释取消就行了如果没有,就自己加一行转载于:https://www.cnblogs.com/zdj8023/p/10837480.html…

    2022年4月11日
    131
  • 详解Android布局中gravity与layout_gravity属性[通俗易懂]

    详解Android布局中gravity与layout_gravity属性[通俗易懂]在android布局中,我们经常会用到“重心”-gravity这个属性。但是gravity有不同的类型:gravitylayout_gravity相对布局中的layout_center等属性今天我们就来具体说说。1、gravitygravity属性是对控件自身内容对自己的限定,拿布局文件test.xml举例来说:此时在TextView中并没有对gravity属性进行操作,文字内容如上图。接下

    2022年7月13日
    14
  • csdn操作文档[通俗易懂]

    csdn操作文档[通俗易懂]csdn操作文档

    2022年4月24日
    44
  • 怎样用python画爱心_女生节前夕特别篇:如何用python画爱心[通俗易懂]

    怎样用python画爱心_女生节前夕特别篇:如何用python画爱心[通俗易懂]亲爱的男生们:展信佳!明天就是女生节了,你们是否还在为送什么而焦头烂额,是否还在俗套地沿用着前辈们的套路。挂横幅——让女生们梦回八九十年代的大学生活?拍视频——加入抖音快手之流?送礼物——非常棒!!可惜没钱?如何能够送出实惠而又有逼格的礼物?今天,我就给大家隆重地介绍一个简单而又高大上的方法——用python来制作一个爱心!!你可能会问,太难了,我不会python怎么办?不要怕,超级简单的,相信我…

    2025年9月24日
    4
  • Android Framework中的Application Framework层介绍「建议收藏」

    Android Framework中的Application Framework层介绍「建议收藏」  Android的四层架构相比大家都很清楚,老生常谈的说一下分别为:  Linux2.6内核层,核心库层,应用框架层,应用层。我今天重点介绍一下应用框架层Framework。        Framework层为我们开发应用程序提供了非常多的API,我们通过调用特殊的API构造我们的APP,满足我们业务上的需求。写APP的人都知道,学习Android开发的第一步就是去学习各种各样的API,什…

    2022年10月15日
    7

发表回复

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

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