仅需要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. OSD（On Screen Display ）技术（转）

    源:OSD(On Screen Display )技术 OSD 是 On Screen Display 的缩写,是应用在 CRT/LCD 显示器上,在显示器的荧幕中产生一些特殊的 字形或图形,让使用者 ...

  2. jquery遍历二维数组

    function eachTowArray() {  var ar = [[1,2,3],[4,5,6],[7,8,9]];  var result="";   //结果存放变量  ...

  3. [cocos2d-x] --- CCNode类详解

    Email : awodefeng@163.com 1 CCNode是cocos2d-x中一个很重要的类,CCNode是场景.层.菜单.精灵等的父类.而我们在使用cocos2d-x时,接触最多的就是场 ...

  4. GB和GBDT 算法流程及分析

    1.优化模型的两种策略: 1)基于残差的方法 残差其实就是真实值和预测值之间的差值,在学习的过程中,首先学习一颗回归树,然后将“真实值-预测值”得到残差,再把残差作为一个学习目标,学习下一棵回归树,依 ...

  5. Python3基础 在print中用 %d 输出一个整数

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  6. db2 将原表列notnull属性修改为null属性的方法 （查看主键约束，唯一约束去syscat.tabconst）

    好久没机会写点东西了,今天把自己遇到的一个小问题跟大家分享一下如何修改db2数据库表中列的属性--将列的非空属性改为允许空的属性,修改数据表的某一列属性其实很简单但是里面有需要细节需要dba注意,毕竟 ...

  7. Grunt安装中遇到的问题汇总

    Grunt安装中遇到的问题汇总 1.如果是windows下的dos中安装Grunt,必须以管理员身份登录(第一个坑) 登录方法是: 方法一:开始>所有程序>附件>命令提示符上右键&g ...

  8. centos 6.5下安装、配置并启动SSH远程访问

    centos 6.5下安装.配置并启动SSH远程访问 1.登录centos 6.5系统,使用root用户登录,如果为非root用户则执行su或su - 或su root或su - root切换为roo ...

  9. Unity3D中切换场景可能导致材质变暗的问题

    Unity版本:5.1.1f1 做公司项目的时候,无意间发现了一个很奇葩的现象:场景A(纯UI,故没有光源)转场到场景B的时候,B中原有的光源似乎失效了,但在Hierarchy窗口中能够看到光源存在, ...

  10. BNU Online Judge-34976-数细菌

    题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34976 题目分析通过a b可以设x,y x+y=a    x+3*y=b  解出x,y, ...