基于ajax的圖片/文件上傳插件

代碼非常簡單,先上代碼

$.fn.fileAJAX= function (options) {
        var defaults={
            url:null,
            type:'POST',
            cache:false,
            data:null,
            processData: false,
            contentType: false,
            success: function () {
            },
            error: function () {}
        };
        var option= $.extend({},defaults,options);
        var uploadFunc= function () {
            $.ajax({
                url:option.url,
                type:option.type,
                cache:option.cache,
                data:option.data,
                processData:option.processData,
                contentType:option.contentType,
                success:option.success,
                error:option.error
            });
        };
        return $(this).each(function () {
            uploadFunc();
        })
    };

主要注意兩點:(1)當使用<code>form</code>f表單配合<code>fajax</code>f上傳文件的時候,<code>form</code>表單不能缺少<code>post</code>請求。(2)使用<code>ajax</code>上傳區別于<code>form</code>上的點是生成了<code>FormData</code>對象,對于嵌套form表單<code>data=new FormData($('#uploadForm')[0])</code>,對于<code>div</code>這樣非<code>form</code>標簽,<code>data=(new FormData).append('file', $('#file')[0].files[0])</code>,前端代碼類似這樣

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容