仅需要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. CodeForces 652C Foe Pairs

    只要计算每个位置最多能到哪个位置,累加即可,DP从后往前预处理一下每个位置到达的最远位置. 有坑点:输入的时候如果同一个点出发的,需要保存最小值. #include<cstdio> #in ...

  2. swift新特性（__nullable和__nonnull

    http://www.mamicode.com/info-detail-923593.html 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是 ...

  3. JNI 中文字符串传递（转）

    源:JNI 中文字符串传递 因为项目编码中通过JNI传递中文字符时出现乱码问题,特搜集了相关资料,整理如下: java内部是使用16bit的unicode编码(UTF-16)来表示字符串的,无论中文英 ...

  4. PHP大小写问题

    PHP对于系统函数.用户自定义函数.类名称等是不区分大小写的如可以用EHCO也可以用echo调用显示函数, 但对于变量名称又是区分大小写的,如$Name和$NAME是2个不同的变量. 而对于文件名又因 ...

  5. java 测试IP

    public static long calSpeed(String ip) { Runtime runtime = Runtime.getRuntime(); // 获取当前程序的运行进对象 Pro ...

  6. JQuery的 jQuery.fn.extend() 和jQuery.extend();

    原文链接:http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html jQuery.fn.extend(); jQuery.extend ...

  7. stm单片机之STM32F4-Discovery资料汇总 (转载自http://blog.163.com/thinki_cao/blog/static/83944875201362493134992/）

    STM32F4的资料大部分都在这里: http://www.stmcu.org/download/index.php?act=ziliao&id=150 根据个人的理解对这些资料作了一些规律, ...

  8. ECSHOP session

    ECSHOP session传值 <?phpclass cls_session{    var $session_table  = ''; ; // SESSION 过期时间 var $sess ...

  9. ServiceStack.Redis 使用链接池方法

    PooledRedisClientManager 1.RedisManage.cs public static class RedisManager { private static PooledRe ...

  10. fastreport.net cdoe 自己的代码

      //初始             Report report1 = new Report();             report1.Clear();             string Re ...