0
点赞
收藏
分享

微信扫一扫

【JavaScript】—— 一键上传插件

1kesou 2022-07-29 阅读 55


前提

   最近项目中用到的是针对Execl文件的导入和导出,其中上传采用一键上传的方式,只要一个导入按钮,选好文件自动上传。实例如图

         

【JavaScript】—— 一键上传插件_上传

现状:

    系统中上传文件页面显示效果如下图所示

        

【JavaScript】—— 一键上传插件_ajax_02

    关于这种操作,在上传文件之后页面进行跳转而且还需要手动点击【upload】按钮,问题是我想把用户培养的更懒啊,而且之前学过ajax异步加载,用户体验度还很高。为什么还要用这种方式!下面就是坑了,问题的关键是ajax不支持文件上传!!!

解决

    好在jQuery本身提供一个上传插件jquery.ocupload-1.1.2.js,只要在jsp中引用就可以了,然后一句代码就可以解决了。


<input id="but1" type="button" value="upload">

实现机制

    demo

    页面


<body>

<form target="myFrame" action="abc" method="post" enctype="multipart/form-data">
<input name="myFile" type="file">
<input type="submit" value="upload">
</form>
<iframe width="0" frameborder="0" height="0" name="myFrame"></iframe>

</body>
</html>

    js


<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ocupload-1.1.2.js"></script>
<script type="text/javascript">
$(function(){
$("#but1").upload({
action: 'abc',
name: 'myFile'
});
});
</script>

    在页面中创建一个<iframe>在页面跳转的时候跳转到<iframe>,然后让<iframe>隐藏。这也就是为什么界面不跳转的原因。

    

【JavaScript】—— 一键上传插件_jquery_03

   为什么不用点击提交按钮?

   在原始的上传界面有一个获取文件路径的文本框,其实当有文件上传的时候,text中内容是变化的。所以可以利用text的change事件和upload按钮绑定,js实现自动提交。

   

【JavaScript】—— 一键上传插件_ajax_04

 【总结】

     只能说站在巨人的肩膀上,利用jQuery提供的插件,功能实现的轻而易举。我认为这个问题的关键是不知道jQuery提供了这款插件,也就是之前boss说过的不怕不知道就怕不知道。真的随着时间的深入才知道其中精髓之处。

举报

相关推荐

0 条评论