仅需要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. Spring 工作原理

    1.spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运 ...

  2. LPC1768的SPI通讯

    SPI是一种全双工串行接口,可处理多个连接到指定总线上的主机和从机.在数据传输过程中总线上只能有一个主机和一个从机通信.在数据传输中,主机总是会向从机发送一帧8到16个位的数据,而从机也总会向主机发送 ...

  3. 【spoj8222】 Substrings

    http://www.spoj.com/problems/NSUBSTR/ (题目链接) 题意 给出一个字符串S,令${F(x)}$表示S的所有长度为x的子串出现次数的最大值.求${F(1)..... ...

  4. leetcode--010 Linked List Cycle II

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAApAAAACICAIAAADfzUzYAAANeklEQVR4nO3dQa7bthbG8W4mK/A+so

  5. MAC上更攺jenkins默认安装目录

    /Library/LaunchDaemons #编缉里面的jenkinshome和username sudo vim org.jenkins-ci.plist #然后 sudo launchctl u ...

  6. SQLite高级：一库建多表，封装类

    package eoe.database; import android.content.Context; import android.database.sqlite.SQLiteDatabase; ...

  7. 代码中使用bitmap资源并加载到控件上

    1.从res/drawable/XX.jpg里引用图片资源: 1. Resources res = getResources(); Bitmap inDrawable= BitmapFactory.d ...

  8. Nodejs之package.json介绍说明

    规范的package.json及package.json中各属性的作用. "name":包名. "description":包简介. "author& ...

  9. 获取IE浏览器关闭事件

    //关闭浏览器时才会触发此操作,刷新页面不执行 //n 检测鼠标相对于用户屏幕的水平位置 - 网页正文部分左:求出鼠标在当前窗口上的水平位置(参照:当前窗口右上角为0.0坐标) //m 网页正文全文宽 ...

  10. html代替submit按钮的图片代码

    代替submit按钮的图片代码格式是 <input type="image" name="..." src="..." onClick ...