ajax上传图片，仿ajaxFileUpload，解决出错和兼容问题

标签：

用了一下ajaxFileUpload老是出现这样或那样的问题，修改里面的配置也不起作用，知道了其中原理自己就大改了一下，

ajaxFileUpload的上传原理是在页面中追加一个表单和iframe，上传的图片克隆到追加的表单中，返回结果存在iframe中；其中总是出问题的地方在返回结果处理这一块。

本人是搞后台开发的不是专业前段工程师，就用到了jquery.form.js，这个插件没什么兼容问题，而且也经常使用，于是就把表单提交这一块交给jquery.form来处理，其他全部去掉。

上代码ajaxFileUpload.js：

jQuery.extend({
    createUploadForm: function (id, fileElementId, data, textareas) {
        var formId = ‘cwUploadForm‘ + id;
        var fileId = ‘cwUploadFile‘ + id;
        var form = jQuery(‘<form  action="" method="POST" name="‘ + formId + ‘" id="‘ + formId + ‘" enctype="multipart/form-data"></form>‘);
        if (data) {
            for (var i in data) {
                jQuery(‘<input type="hidden" name="‘ + i + ‘" value="‘ + data[i] + ‘" />‘).appendTo(form);
            }
        }
        if (textareas) {
            for (var i in textareas) {
                jQuery(‘<textarea name="‘ + i + ‘">‘+textareas[i]+‘</textarea>‘).appendTo(form);
            }
        }
        var oldElement = jQuery(‘#‘ + fileElementId);
        var newElement = jQuery(oldElement).clone();
        jQuery(oldElement).attr(‘id‘, fileId);
        jQuery(oldElement).before(newElement);
        jQuery(oldElement).appendTo(form);
        jQuery(form).css(‘position‘, ‘absolute‘);
        jQuery(form).css(‘top‘, ‘-1200px‘);
        jQuery(form).css(‘left‘, ‘-1200px‘);
        jQuery(form).appendTo(‘body‘);
        return form;
    },

    ajaxFileUpload: function (s) {
        var defaults = {fileElementId: ‘image‘, data:false, textareas: false, beforeSubmit: false,success:false,error:false};
        var opts  = jQuery.extend(defaults, s);
        var id = new Date().getTime();
        var form = jQuery.createUploadForm(id, opts.fileElementId, (typeof(opts.data) == ‘undefined‘ ? false : opts.data),(typeof(opts.textareas) == ‘undefined‘ ? false : opts.textareas));
        var formId = ‘cwUploadForm‘ + id;
            var form = jQuery(‘#‘ + formId);
            jQuery(form).attr(‘action‘, opts.url);
            jQuery(form).attr(‘method‘, ‘POST‘);
            if (form.encoding) {
                jQuery(form).attr(‘encoding‘, ‘multipart/form-data‘);
            }
            else {
                jQuery(form).attr(‘enctype‘, ‘multipart/form-data‘);
            }
            jQuery(form).ajaxSubmit({
                dataType : ‘json‘,
                type:‘post‘,
                beforeSubmit: opts.beforeSubmit,
                success : opts.success,
                error : opts.error
            });
        setTimeout(function () {
            try {
                jQuery(form).remove();
            } catch (e) {
            }
        }, 100)
    }
})

<script src="jquery.form.min.js"></script>

<script type="text/javascript">
    function ajaxFileUpload() {
        $.ajaxFileUpload({
            url: ‘http://${domain}/uploadImage‘,
            data: {"mark": "ask"},
            fileElementId: ‘uploadImg‘,
            beforeSubmit: function(a,f,o) {
//做一些上传前的操作：加载中、校验等
            },
            success : function(data) {
                alert(data.success);
                alert(data.url);
            },
            error : function(data) {
                alert("上传出错");
            }
        });
        return true;
    }
</script>

 <input type="file" name="imgFile" id="uploadImg" onchange="return ajaxFileUpload();" >

到此结束，非前端工程师目前只能做成这样了，欢迎大家改进

ajax上传图片，仿ajaxFileUpload，解决出错和兼容问题

标签：

原文地址：http://my.oschina.net/ffy/blog/518833