/*******************************************************************************
* 异步上传文件,兼容IE8,火狐和谷歌可用,如果可以使用h5则使用h5
* 实现单个多次上传不刷新
* @author 柳伟伟 <702295399@qq.com>
* @version 1.5 (2016-05-09) 加入h5上传文件
*******************************************************************************/
(function ($) {
var frameCount = 0;
var formName = "";
var iframeObj = null;
var state = {};
//var fileHtml = "";
var colfile = null;
//清空值
function clean(target) {
var file = $(target);
var col = file.clone(true).val("");
file.after(col);
file.remove();
//关键说明
//先得到当前的对象和参数,接着进行克隆(同时克隆事件)
//将克隆好的副本放在原先的之后,按照顺序逐个删除,最后初始化克隆的副本
};
function h5Submit(target) {
var options = state.options;
var fileObj = target[0].files[0]; var fd = new FormData();//h5对象
//附加参数
for (key in options.params) {
fd.append(key, options.params[key])
}
var fileName = target.attr('name');
if (fileName == ''
|| fileName == undefined) {
fileName = 'file';
}
fd.append(fileName, fileObj);
//异步上传
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log(percentComplete + "%");
if (options.onProgress) {
options.onProgress(evt);
}
}
}, false);
xhr.addEventListener("load", function (evt) {
if ('json' == options.dataType) {
var d = window.eval('(' + evt.target.responseText + ')');
options.onComplate(d);
} else {
options.onComplate(evt.target.responseText);
}
}, false);
xhr.addEventListener("error", function () {
console.log("error");
}, false);
xhr.open("POST", options.url);
xhr.send(fd);
}
function ajaxSubmit(target) {
var options = state.options;
if (options.url == '' || options.url == null) {
alert("无上传地址");
return;
}
if ($(target).val() == '' || $(target).val() == null) {
alert("请选择文件");
return;
}
var canSend = options.onSend($(target), $(target).val());
if (!canSend) {
return;
}
/*判断是否可以用h5*/
if (window.FormData) {
//h5
console.log('h5Submit');
h5Submit(target);
} else {
/**/
if (iframeObj == null) {
var frameName = 'upload_frame_' + (frameCount++);
var iframe = $('<iframe style="position:absolute;top:-9999px" ><script type="text/javascript"></script></iframe>').attr('name', frameName);
formName = 'form_' + frameName;
var form = $('<form method="post" style="display:none;" enctype="multipart/form-data" />').attr('name', formName);
form.attr("target", frameName).attr('action', options.url);
//
var fileHtml = $(target).prop("outerHTML");
colfile = $(target).clone(true);
$(target).replaceWith(colfile);
var formHtml = "";
// form中增加数据域
for (key in options.params) {
formHtml += '<input type="hidden" name="' + key + '" value="' + options.params[key] + '">';
}
form.append(formHtml);
form.append(target);
iframe.appendTo("body");
form.appendTo("body");
iframeObj = iframe;
}
//禁用
$(colfile).attr("disabled", "disabled");
var form = $("form[name=" + formName + "]");
//加载事件
iframeObj.bind("load", function (e) {
var contents = $(this).contents().get(0);
var data = $(contents).find('body').text();
if ('json' == options.dataType) {
try {
data = window.eval('(' + data + ')');
}
catch (Eobject) {
console.log('返回的json数据错误');
console.log(Eobject);
data = null;
}
}
options.onComplate(data);
iframeObj.remove();
form.remove();
iframeObj = null;
//启用
$(colfile).removeAttr("disabled");
});
try {
form.submit();
} catch (Eobject) {
console.log(Eobject);
}
}
};
//构造
$.fn.upload = function (options) {
if (typeof options == "string") {
return $.fn.upload.methods[options](this);
}
options = options || {};
state = $.data(this, "upload");
if (state)
$.extend(state.options, options);
else {
state = $.data(this, "upload", {
options: $.extend({}, $.fn.upload.defaults, options)
});
}
};
//方法
$.fn.upload.methods = {
clean: function (jq) {
return jq.each(function () {
clean(jq);
});
},
ajaxSubmit: function (jq) {
return jq.each(function () {
ajaxSubmit(jq);
});
},
getFileVal: function (jq) {
return jq.val()
}
};
//默认项
$.fn.upload.defaults = $.extend({}, {
url: '',
dataType: 'json',
params: {},
onSend: function (obj, str) { return true; },
onComplate: function (e) {},
onProgress: function (e) {}
});
})(jQuery);

调用下面的方法
function ajaxSubmit1() {
$("#change_file").upload({
url: '../upload/uploadImage.do',
// 其他表单数据
params: { name: 'pxblog' },
// 上传完成后, 返回json, text
dataType: 'json',
onSend: function (obj, str) { return true; },
// 上传之后回调
onComplate: function (data) {
$("#show_img").attr("src",data.url);
$("#imagePathOne").val(data.url);
}
});
$("#change_file").upload("ajaxSubmit");
}

/******************************************************************************** 异步上传文件,兼容IE8,火狐和谷歌可用,如果可以使用h5则使用h5* 实现单个多次上传不刷新* @author 柳伟伟 <702295399@qq.com>* @version 1.5 (2016-05-09) 加入h5上传文件*******************************************************************************/(function ($) {    var frameCount = 0;    var formName = "";    var iframeObj = null;    var state = {};    //var fileHtml = "";    var colfile = null;    //清空值    function clean(target) {        var file = $(target);        var col = file.clone(true).val("");        file.after(col);        file.remove();        //关键说明        //先得到当前的对象和参数,接着进行克隆(同时克隆事件)        //将克隆好的副本放在原先的之后,按照顺序逐个删除,最后初始化克隆的副本    };    function h5Submit(target) {        var options = state.options;        var fileObj = target[0].files[0];
        var fd = new FormData();//h5对象        //附加参数        for (key in options.params) {            fd.append(key, options.params[key])        }        var fileName = target.attr('name');        if (fileName == ''            || fileName == undefined) {            fileName = 'file';        }        fd.append(fileName, fileObj);        //异步上传        var xhr = new XMLHttpRequest();        xhr.upload.addEventListener("progress", function (evt) {            if (evt.lengthComputable) {                var percentComplete = Math.round(evt.loaded * 100 / evt.total);                console.log(percentComplete + "%");                if (options.onProgress) {                    options.onProgress(evt);                }            }        }, false);        xhr.addEventListener("load", function (evt) {            if ('json' == options.dataType) {                var d = window.eval('(' + evt.target.responseText + ')');                options.onComplate(d);            } else {                options.onComplate(evt.target.responseText);            }        }, false);        xhr.addEventListener("error", function () {            console.log("error");        }, false);        xhr.open("POST", options.url);        xhr.send(fd);    }    function ajaxSubmit(target) {        var options = state.options;        if (options.url == '' || options.url == null) {            alert("无上传地址");            return;        }        if ($(target).val() == '' || $(target).val() == null) {            alert("请选择文件");            return;        }        var canSend = options.onSend($(target), $(target).val());        if (!canSend) {            return;        }        /*判断是否可以用h5*/        if (window.FormData) {            //h5            console.log('h5Submit');            h5Submit(target);        } else {            /**/            if (iframeObj == null) {                var frameName = 'upload_frame_' + (frameCount++);                var iframe = $('<iframe style="position:absolute;top:-9999px" ><script type="text/javascript"></script></iframe>').attr('name', frameName);                formName = 'form_' + frameName;                var form = $('<form method="post" style="display:none;" enctype="multipart/form-data" />').attr('name', formName);                form.attr("target", frameName).attr('action', options.url);                //                var fileHtml = $(target).prop("outerHTML");                colfile = $(target).clone(true);                $(target).replaceWith(colfile);                var formHtml = "";                // form中增加数据域                for (key in options.params) {                    formHtml += '<input type="hidden" name="' + key + '" value="' + options.params[key] + '">';                }                form.append(formHtml);                form.append(target);                iframe.appendTo("body");                form.appendTo("body");                iframeObj = iframe;            }            //禁用            $(colfile).attr("disabled", "disabled");            var form = $("form[name=" + formName + "]");            //加载事件            iframeObj.bind("load", function (e) {                var contents = $(this).contents().get(0);                var data = $(contents).find('body').text();                if ('json' == options.dataType) {                    try {                        data = window.eval('(' + data + ')');                    }                    catch (Eobject) {                        console.log('返回的json数据错误');                        console.log(Eobject);                        data = null;                    }                }                options.onComplate(data);                iframeObj.remove();                form.remove();                iframeObj = null;                //启用                $(colfile).removeAttr("disabled");            });            try {                form.submit();            } catch (Eobject) {                console.log(Eobject);            }        }    };    //构造    $.fn.upload = function (options) {        if (typeof options == "string") {            return $.fn.upload.methods[options](this);        }        options = options || {};        state = $.data(this, "upload");        if (state)            $.extend(state.options, options);        else {            state = $.data(this, "upload", {                options: $.extend({}, $.fn.upload.defaults, options)            });        }    };    //方法    $.fn.upload.methods = {        clean: function (jq) {            return jq.each(function () {                clean(jq);            });        },        ajaxSubmit: function (jq) {            return jq.each(function () {                ajaxSubmit(jq);            });        },        getFileVal: function (jq) {            return jq.val()        }    };    //默认项    $.fn.upload.defaults = $.extend({}, {        url: '',        dataType: 'json',        params: {},        onSend: function (obj, str) { return true; },        onComplate: function (e) {},        onProgress: function (e) {}    });})(jQuery);

jquery 上传回显图片预览的更多相关文章

  1. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  2. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  3. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  4. Jquery OR Js 实现图片预览

    Jquery方法一: <!DOCTYPE html> <html> <head>     <title></title>     <s ...

  5. jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...

  6. 图片上传前的预览(PHP)

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

  7. 分离与继承的思想实现图片上传后的预览功能:ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  8. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  9. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

随机推荐

  1. Combination Sum

    Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all unique c ...

  2. 对冲的艺术——delta中性交易

    delta中性交易 delta中性交易——外行话 delta中性交易就是构造一个含有期权头寸的组合,使其不受标的股票或指数价格小幅变动的影响.换句话讲,无论标的价格是涨还是跌,组合的市值始终保持不变. ...

  3. WCF初体验(C#操作Exchange)

    最近再做一个Exchange的客户端维护工具,遇到了很多问题. 由于刚接触C#和Exchange,所以还需要继续学习.在此记录一下,只是一个新手的记录. 环境:         服务器:Exchang ...

  4. 有wsdl地址生成客户端调用

    新建Java Project 1.项目名称:HelloWorldClient 2.建好的项目 3.生成客户端 选择HelloWorldClient 填写wsdl地址(参考:myeclipse构建web ...

  5. Rails : 产品环境(生产环境)的部署

    bundle install rails server (默认为开发环境) rails server -p80 -e production (指定为生产环境 ,并自定义指定站点端口) rake RAI ...

  6. C#图像处理

    网站中,对用户图片上传处理是很有必要的.对于一些常用的处理,对图片各种形式的压缩,各种形式的水印. 1.裁剪正方形头像方法 /// <summary> /// 正方型裁剪 /// 以图片中 ...

  7. Eclipse FreeMarker 插件安装

    方法一:手动安装 手动安装没有成功 步骤: 1. 下载freemarker-ide : http://sourceforge.net/projects/freemarker-ide/files/ 2. ...

  8. OAF_开发系列09_实现OAF预提取LOV设定(案例)

    20150712 Created By BaoXinjian

  9. Unable to find messages file 'cscui.dll' 问题解决

    之前在工作机器上安装VS 2015卡死,结束进程,安装失败一直无法使用,昨天下班开着电脑把VS 2015卸载了,今天早上来,以前正确的项目现在生成都报错 "Unable to find me ...

  10. Dialog_ _dialog系统样式讲解 及 透明背景

    AlertDialog.Builder builder = new AlertDialog.Builder(DialogActivity.this,AlertDialog.THEME_TRADITIO ...