异步上传文件、图片

// 目标页面上有东西 <input type="file" name="fileField" id="fileField" />
function ajaxUpload(opt) {

    /*
    参数说明:
    opt.ID : 页面里file控件的ID;
    opt.Format : 文件格式,以数组的形式传递,如[‘jpg‘,‘png‘,‘gif‘,‘bmp‘];
    opt.CallBack : 上传成功后回调;
    opt.Url:上传地址;
    opt.ImageSizeArry:图片压缩尺寸,如[‘200x200‘,‘100x100‘];
    opt.ProxyUrl : 上传回调代理地址
    */
    var iName = "frameName" + Math.random().toString(); //太长了,变短点
    var iframe, form, file, fileParent;

    var postUrl = opt.Url;
    if (postUrl.indexOf("?") <= -1)
    {
        postUrl += "?rd=" + Math.random();
    }

    if (opt.ImageSizeArry != null && opt.ImageSizeArry != undefined && opt.ImageSizeArry != "") {
        postUrl += "&ImageSizeArry=" + opt.ImageSizeArry;
    }

    if (opt.ProxyUrl != null && opt.ProxyUrl != undefined && opt.ProxyUrl != "") {
        postUrl += "&proxyUrl=" + encodeURIComponent(opt.ProxyUrl);
    }

    //创建iframe和form表单
    iframe = $(‘<iframe name="‘ + iName + ‘" style="display:none;"  />‘);
    form = $(‘<form method="post" target="‘ + iName + ‘" style="display:none;" action="‘ + postUrl + ‘"  name="form_‘ + iName + ‘" enctype="multipart/form-data" ></from>‘);
    file = $(‘#‘ + opt.ID); //通过ID获取flie控件
    fileParent = file.parent(); //存父级

    if (file.val()=="") {
        return;
    }

    file.appendTo(form);
    //插入body
    $(document.body).append(iframe).append(form);

    //取得所选文件的扩展名
    var fileFormat = /\.[a-zA-Z]+$/.exec(file.val())[0].substring(1);
    if (opt.Format.join(‘-‘).indexOf(fileFormat) != -1) {
        form.submit(); //格式通过验证后提交表单;

    } else {
        file.appendTo(fileParent); //将file控件放回到页面
        iframe.remove();
        form.remove();
        $.DR_Alter("文件格式错误,请重新选择!");
    };

    //文件提交完后
    iframe.load(function () {
        var data = $(iframe).contents().find(‘body‘).html();
        file.appendTo(fileParent);
        iframe.remove();
        form.remove();
        opt.CallBack(data, opt.ID);
    })

}

  

时间: 2024-07-30 23:42:23

异步上传文件、图片的相关文章

jQuery插件-ajaxFileUpload异步上传文件

ajaxFileUpload是前两天学习过程中接触到的一个JQ插件,功能很简单,就是实现异步上传文件的功能. 1.语法介绍 $.ajaxFileUpload([setting]); 参数说明: (1)url——执行上传处理的地址: (2)secureuri——是否启用安全提交,默认为false: (3)fileElementId——需要上传<input type=”file”>控件id属性值: (4)data——自定义参数,即需要额外传递的JSON格式数据: (5)type——请求方式,提交自

struts2 jquery ajaxFileUpload 异步上传文件

一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和struts2框架和好的融合在一起.但是网上的提供的一些ajaxFileUpload.js插件存在一些问题,不能够实现多次点击上传文件,要想再次上传必须重新刷新页面.在网上找了好久才找到真正的解决方案,有些网友给出的解决方案并没有真正的解决问题,不知到什么原因.我的修改: 原文件: var oldElement = $('#' +

异步上传文件多种方式归纳

最近在做异步上传文件的工作,用到了一些库,这里归纳下,暂且不考虑异常处理,仅作为demo. 1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileu

Jquery_异步上传文件多种方式归纳

1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

HTML5 jQuery+FormData 异步上传文件,带进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="../resources/css/common.css" rel="stylesheet" /> <script src="../resources/js/jquery-2.1.4.js"></script> <

关于js异步上传文件

好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件还有别的信息需要交互,跟后端商量后决定文件单独上传,获取到服务器端返回的文件地址在和表单一起提交.这里就需要异步上传文件. 在网上扒了扒相关的内容,发现还真不少,阮一峰老师的这篇文章(文件上传的渐进式增强)就介绍的很具体,下面就谈谈自己在实战中遇到的一些问题的感受吧. 先看看效果,实现了哪些功能 (

JQuery插件ajaxFileUpload 异步上传文件(PHP版)

太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.

简述三种异步上传文件方式

 很久没写过博客了! 上次写已经是去年的12月了,离现在也有足足三个月了.这几个月因为要搭建个人网站以及准备个人简历,包括最近要准备最近的各大公司的实习春招,很难抽时间来写博客,这次的异步文件上传我觉得是很有必要了解的,笼络了很多知识点,因此准备写一篇博客来巩固下. 异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpReques

input(file)异步上传文件

页面 <input id="file" name="file" type="file"><button id="btn" type="button">上传</button> //异步上传文件var $file = $('#file');$('#btn').click(function() { var data = new FormData(); data.append('