仅需要new一个对象，将上传后台的url和点击触发上传的元素id传给对象，就可以自从实现上传

暂不支持IE

 <html>

 <body>

 <a href="#" id="a_upload">上传</a>

 </body>

 </html>

 <script src="lib_shb_fileupload.js"></script>

 <script type="text/javascript">

 var fu = new SHBFileUpload("doUpload.jsp",'a_upload');

 fu.callback = function(){

     console.log(fu.status) ;

     console.log(fu.responseText) ;

 }

 </script>

js源码如下：

 /**

 *简单的文件上传

 *@author:索洪波

 *@qq:609690891

 *@version:1.0

 */

 /**

 *@SHBFileUpload

 *@param:url上传url

 *@param:id 出发上传操作的元素id

 */

 function SHBFileUpload(url,id){

     this.url = url ;

     this.id = id ;

     this.iframe  = null ;

     this.form = null ;

     this.input = null ;

     this.status = 'init' ;

     this.responseText = '' ;

     this.timeout = 100 ;

     this.init();

 }

 SHBFileUpload.prototype.createIframe = function(){

     var iframe = document.createElement('iframe') ;

     iframe.id = 'SHB_FU_Frame' ;

     iframe.name = 'SHB_FU_Frame' ;

     iframe.style.display = 'none' ;

     document.body.appendChild(iframe);

     this.iframe = iframe ;

 }

 SHBFileUpload.prototype.createForm = function(){

     var form = document.createElement('form') ;

     form.action = this.url ;

     form.id = 'SHB_FU_Form' ;

     form.name = 'SHB_FU_Form' ;

     form.method = 'post' ;

     form.encoding = 'multipart/form-data' ;

     form.target = 'SHB_FU_Frame' ;

     form.style.display = 'none' ;

     this.form = form ;

     var input = document.createElement('input') ;

     input.type = 'file' ;

     input.id = 'SHB_FU_Input' ;

     input.name = 'SHB_FU_Input' ;

     input.style.display = 'none' ;

     var self = this ;

     input.onchange = function(){self.doUpload()} ;

     this.input = input ;

     form.appendChild(input) ;

     document.body.appendChild(form) ;

 }

 SHBFileUpload.prototype.doUpload = function(){

     this.status = 'sending' ;

     var self = this ;

     this.iframe.onload = function(){self.hasLoad()} ;

     this.form.submit();

 }

 SHBFileUpload.prototype.init = function(){

     this.createIframe() ;

     this.createForm() ;

     var self = this ;

     document.getElementById(this.id).onclick = function(){self.input.click()} ;

 }

 SHBFileUpload.prototype.hasLoad = function(){

     var iframe = this.iframe ;

     this.status = 'success' ;

     if(iframe.contentWindow){

          this.responseText = iframe.contentWindow.document.body?iframe.contentWindow.document.body.innerHTML:"";

     }else if(iframe.contentDocument){

          this.responseText = iframe.contentDocument.document.body?iframe.contentDocument.document.body.innerHTML:"";

     }

     this.callback() ;

 }

 SHBFileUpload.prototype.callback = function(){}

模仿jquery的fileupload插件的更多相关文章

  1. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  2. jquery.fileupload插件的简易使用日志

    来源:http://yixiandave.iteye.com/blog/1897330 本文内容主要包含fileupload插件传递参数和取回服务器返回数据的方法 jquery.fileupload官 ...

  3. 使用jQuery.FileUpload插件和Backload组件裁剪上传图片

    □ 思路 1.自定义控制器继承Backload的默认控制器BackloadController2.自定义一个jQuery File Upload初始化js文件,使用自定义控制器的方法3.在视图页面调用 ...

  4. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  5. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  6. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  7. jQuery 人脸识别插件，支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  8. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  9. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

随机推荐

  1. iOS透明引导页

    一.效果展示 这里写图片描述 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作.引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域 二.怎么做? ...

  2. sencha cmd常用命令汇总

    一.sencha generate:自动生成项目或者代码 1.sencha generate app 项目名称 生成路径 :生成一个新的extjs项目 注明:以上命令会从官网下载试用版本的ext代码到 ...

  3. vmware克隆Centos6.7虚拟机网卡无法启动问题

    快速处理办法: cat /etc/sysconfig/network-scripts/ifcfg-eth0 sed -i '/UUID/d' /etc/sysconfig/network-script ...

  4. 我推荐的一些iOS开发书单

    文/叶孤城___(简书作者)原文链接:http://www.jianshu.com/p/2fa080673842著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 上次发了一下比较不错的i ...

  5. svn 几个好用的命令

    Mac下操作的命令 1. 删除目录及子目录下,未添加的文件 svn status . | grep '^?' | awk '{print $2}' | xargs rm -rf 2.恢复根目录及子目录 ...

  6. java实现——005从尾到头打印链表

    import java.util.Stack; public class T005 { public static void main(String[] args){ Node n1 = new No ...

  7. win7下sublime text3 安装Emmet的pyv8

    1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.适用于 Sublime Text 3: import urllib.request,os;pf=' ...

  8. 解决VirtualBox下安装虚拟机（Ubuntu）出错（不能为虚拟电脑Ubuntu打开一个新的任务）的有关问题

    [转]http://www.myexception.cn/program/1964906.html 解决VirtualBox下安装虚拟机(Ubuntu)出错(不能为虚拟电脑Ubuntu打开一个新的任务 ...

  9. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  10. Xcode7中 添加 .dylib

    转一个 Xcode 7 缺少 *.dylib库的解决方法 Xcode7中 Link Binary With Libraries 没有 .dylib库,只能找到对应的 .tbd,但不能代替使用,通过查找 ...