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


相关推荐

  • fastdfs工作原理(技术原理)

    FastDFS架构:FastDFS服务端有三个角色:跟踪服务器(trackerserver)、存储服务器(storageserver)和客户端(client)。**trackerserver:**跟踪服务器,主要做调度工作,起负载均衡的作用。在内存中记录集群中所有存储组和存储服务器的状态信息,是客户端和数据服务器交互的枢纽。相比GFS中的master更为精简,不记录文件索引信息,占用的内存量很少。**storageserver:**存储服务器(又称:存储节点或数据服务器),文件和文件属性(me

    2022年4月13日
    44
  • 【Linux】linux经常使用基本命令

    【Linux】linux经常使用基本命令

    2021年12月16日
    40
  • 负数的二进制表示方法「建议收藏」

    负数的二进制表示方法「建议收藏」负数的二进制表示方法假设有一个int类型的数,值为3,那么,我们知道它在计算机中表示为:00000000000000000000000000000011因为int类型的数占用4字节(32位),所以前面填了一堆0。在计算机中,负数以其正值的补码形式表达。什么叫补码呢?这得先从原码,反码说起。原码:一个整数,按照绝对值大小转换成的二进制数,称为原码。比如

    2025年6月5日
    4
  • jenkins备份和发布

    jenkins备份和发布ansible安装安装ansible依赖yum-yinstallepel-release安装ansibleyum-yinstallansibleansible配置参考jenkins使用ansible远端备份ansibleall-mshell-a”tar-czfcode.tar.gz.”2>/log/errorLog/tar_czvf.log

    2022年5月21日
    40
  • 数据库二级映射是什么_内存映射技术

    数据库二级映射是什么_内存映射技术1.     概述LMDBiscompact(紧凑的),fast,powerful,androbustandimplementsasimplifiedvariantoftheBerkeleyDB(BDB)API.(BDBisalsoverypowerful,andverboselydocumentedinitsownright.)Afterre…

    2022年9月28日
    4
  • laravel 5.6 请教邮件中的cc,bcc是什么意思,有什么用?

    laravel 5.6 请教邮件中的cc,bcc是什么意思,有什么用?

    2021年10月24日
    82

发表回复

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

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