仅需要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. MySQL show master / slave status 命令参数

    一.show master status 二.show slave status Slave_IO_State SHOW PROCESSLIST输出的State字段的拷贝.SHOW PROCESSLI ...

  2. css3动画-transition

    当css属性改变的时候,控制animation的速度,让属性的变化发生在一段时间之内,而不是立即生效. 语法 transition: <property> <duration> ...

  3. Mysql导入zabbix的sql语句时报错：ERROR 1045 (28000)

    #Warning: Using a password on the command line interface can be insecure.#ERROR 1045 (28000): Access ...

  4. FUNCTION CALL STACK FRAME

    function call stack frame 两个寄存器 esp 栈顶指针寄存器,指向调用栈的栈顶(始终指向,意味着栈分配到哪里了,从当前栈往高地址是已经分配了的) ebp 基址指针寄存器,指向 ...

  5. MAC中使用Vim和GCC编译C程序

    1.打开终端 2.输入以下命令进入vim编辑器: vim a.c 3.进入编辑器后按i进入insert模式,然后键入以下代码: #include<stdio.h> int main(){ ...

  6. Struts2---Result（传统Web应用程序与Ajax应用程序的异同）

    看了很久的struts,在视频和书的引导下,慢慢明白了点,推荐:<struts 2 in action>和马士兵的视频 今天看结果这块时,由于还没有学过ajax等,不太明白,但是必须弄懂嗒 ...

  7. 命名空间“Microsoft.AspNet”中不存在类型或命名空间名“Mvc”

    问题: 错误 CS0234 命名空间"Microsoft.AspNet"中不存在类型或命名空间名"Mvc"(是否缺少程序集引用?) 解决方案: 打开文件夹 Us ...

  8. Swift去除两边的特定字符（空格或其它）

    var str_trim = "   !hi  !23   !" str_trim.stringByTrimmingCharactersInSet(NSCharacterSet.w ...

  9. java程序的工作原理

    Sun公司设计java语言的目标是让Java程序不必经过修改就可以在各种各样的计算机(包括PC机和工作站)上运行.为了实现这一目标,Sun公司提供了一阵Java虚拟机(Java Virtual Mac ...

  10. LoadRunner

    LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找LoadRunner能够对整个企业架构进行测试.通过使用LoadRunne ...