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


相关推荐

  • 软件测试用例设计 (一)等价类划分法「建议收藏」

    软件测试用例设计 (一)等价类划分法「建议收藏」软件测试对于软件的重要性不言而喻,是计算机类学生毕业后的一个重要从业方向之一。如果要从事软件测试,那么有些必备的技能还是要有的。比如,测试理论、测试工具、测试文档的编制。今天我们就来看看最最最重要的测试雷论:黑盒测试用例设计方法——等价类,可以说,这个不会,你的软件测试理论约等于0、目录1.为什么要掌握等价类用例设计方法2.等价类划分法是什么3.等价类划分法的设计步骤4.等价类划分实例走起步骤1:划分等价类步骤2:设计用例覆盖有效等价类步骤3:设计用例覆盖无效等价类

    2022年10月17日
    0
  • pytest指定用例_pytest如何循环执行用例

    pytest指定用例_pytest如何循环执行用例前言测试用例在设计的时候,我们一般要求不要有先后顺序,用例是可以打乱了执行的,这样才能达到测试的效果.有些同学在写用例的时候,用例写了先后顺序,有先后顺序后,后面还会有新的问题(如:上个用例返回

    2022年7月30日
    36
  • 深入理解字符串和字节数组转换

    深入理解字符串和字节数组转换

    2021年7月25日
    64
  • 端口 TCP/IP =PORT NUMBERS[通俗易懂]

    端口 TCP/IP =PORT NUMBERS[通俗易懂] http://www.iana.org/assignments/port-numbersPORTNUMBERS(lastupdated2009-10-28)Theportnumbersaredividedintothreeranges:theWellKnownPorts,theRegisteredPorts,andtheDynamic

    2022年9月27日
    0
  • osi七层模型各层功能简述(简述osi七层模型各层功能)

    读完本篇文章将会了解以下问题1.OSI的基本概念及原则2.OSI七层模型各层功能概述3.OSI七层模型举例4.OSI七层模型总结—————————————————————————————————————————…

    2022年4月10日
    62
  • modelsim-win64-10.4-se 下载、安装、破解全攻略(屡试不爽)

    modelsim-win64-10.4-se 下载、安装、破解全攻略(屡试不爽)本教程包括软件下载、破解文件下载、安装破解方法,助你一次成功。软件安装好了却不能用,想必大家都有过这样的痛苦和无奈。这款软件的破解花了我整整一个下午的时间,期间在网上找了各种方法尝试均以失败告终,差点让我放弃破解而着手去换操作系统。网上的方法多存在着疏漏和差错,所以这也是我写次教程的初衷,希望能帮到大家,少走弯路。本人使用系统声明:win864位专业版以及win1064位安装

    2022年5月24日
    160

发表回复

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

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