java 項目使用 ajaxfileupload

html

<style>
        #oDiv {
            height: 200px;
            width: 200px;
            border: 1px solid #000;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
    <div class="all">
        <div id="oDiv">
            <img src="" id="showPic" style="height:100%;width:100%" />
        </div>
        <input type="file"  id="oInput" name="file" onchange="ShopPictureInfoDlg.upload_cover(this)"/>
    </div>


<!-- form 表單裏面的imageUrl錄入框 實際是要隱藏的 -->
<input id="imageUrl" name="圖片url" type="text" name="ImageUrl" placeholder="defaultPath" value=""/>

js:

注意裏面的complete 設置爲false ,由於該項目的ajax屬性設置了須要執行compele的方法,而配置的環境卻不能夠解析,回有關於

XMLHttpRequest getResponseHeader() 沒有這個function的錯誤

//具體的上傳圖片方法
function ajax_upload(feid, callback, ext) {
    if (image_check(feid)) {
        $.ajaxFileUpload({
            url: Feng.ctxPath +"/shop/uploadImage",
            secureuri : false,
            fileElementId: feid,
            dataType: 'json',
            data: {fileType: ext},//增長推送的屬性
            type: 'post',
            async: true,
            complete: false,
            success:
                function (data) {
                    if (data.success){
                        $("#imageUrl").val(data.imagePath);
                        $("#showPic").attr("src", data.imagePath);
                    }
                    alert(data.message);
                },
            error:
                function (data) {
                    console.log(data);
                    console.log("error");
                }
        });
    }
};

 ajaxfileupload:

修改了裏面uploadHttpData type="json", 因爲返回的是application/json ,因此獲取的數據迴帶上 <pre 標籤,不是標準的xml 因此要作數據替換

            data = jQuery.parseJSON(jQuery(data).text());
            // eval("data = " + data);

/**
 * 初始化詳情對話框
 */
var ShopPictureInfoDlg = {
    shopPictureInfoData : {},
    validateFields: {
        shopId: {
            validators: {
                notEmpty: {
                    message: '店鋪id不能爲空'
                }
            }
        },
        imageUrl: {
            validators: {
                notEmpty: {
                    message: '圖片url不能爲空'
                }
            }
        },
    }
};

/**
 * 清除數據
 */
ShopPictureInfoDlg.clearData = function() {
    this.shopPictureInfoData = {};
}

/**
 * 設置對話框中的數據
 *
 * @param key 數據的名稱
 * @param val 數據的具體值
 */
ShopPictureInfoDlg.set = function(key, val) {
    this.shopPictureInfoData[key] = (typeof val == "undefined") ? $("#" + key).val() : val;
    return this;
}

/**
 * 設置對話框中的數據
 *
 * @param key 數據的名稱
 * @param val 數據的具體值
 */
ShopPictureInfoDlg.get = function(key) {
    return $("#" + key).val();
}

/**
 * 關閉此對話框
 */
ShopPictureInfoDlg.close = function() {
    parent.layer.close(window.parent.ShopPicture.layerIndex);
}

/**
 * 收集數據
 */
ShopPictureInfoDlg.collectData = function() {
    this
    .set('id')
    .set('shopId')
    .set('imageUrl')
    .set('noteText')
    ;
}
/**
 * 驗證數據是否爲空
 */
ShopPictureInfoDlg.validate = function () {
    $('#shopPictureForm').data("bootstrapValidator").resetForm();
    $('#shopPictureForm').bootstrapValidator('validate');
    return $("#shopPictureForm").data('bootstrapValidator').isValid();
};
/**
 * 提交添加
 */
ShopPictureInfoDlg.addSubmit = function() {

    this.clearData();
    this.collectData();
    if (!this.validate()) {
        return;
    }
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/shopPicture/add", function(data){
        Feng.success("添加成功!");
        window.parent.ShopPicture.table.refresh();
        ShopPictureInfoDlg.close();
    },function(data){
        Feng.error("添加失敗!" + data.responseJSON.message + "!");
    });
    ajax.set(this.shopPictureInfoData);
    ajax.start();
}

/**
 * 提交修改
 */
ShopPictureInfoDlg.editSubmit = function() {

    this.clearData();
    this.collectData();
    if (!this.validate()) {
        return;
    }
    //提交信息
    var ajax = new $ax(Feng.ctxPath + "/shopPicture/update", function(data){
        Feng.success("修改爲功!");
        window.parent.ShopPicture.table.refresh();
        ShopPictureInfoDlg.close();
    },function(data){
        Feng.error("修改失敗!" + data.responseJSON.message + "!");
    });
    ajax.set(this.shopPictureInfoData);
    ajax.start();
}


/**
 * 子窗口獲取父窗口的值
 * @param id
 */
function init() {
    // 初始化內容
    var url = parent.document.URL;
    var shopId = $("#shopId",window.parent.document).text();
    if(url.indexOf("detail") != -1){
        $("#shopId").val(shopId);
    }
};
init();

/**
 * 圖片上傳
 */
ShopPictureInfoDlg.upload_cover = function(obj) {
    //回傳後綴
    var filePath = $("input[name='file']").val();
    var extStart = filePath.lastIndexOf(".");
    var ext = filePath.substring(extStart, filePath.length).toUpperCase();

    ajax_upload(obj.id, function (data) { //function(data)是上傳圖片的成功後的回調方法
        var isrc = data.relatPath.replace(/\/\//g, '/'); //獲取的圖片的絕對路徑
        $('#image').attr('src', basePath + isrc).data('img-src', isrc); //給<input>的src賦值去顯示圖片
    }, ext);
}

//具體的上傳圖片方法
function ajax_upload(feid, callback, ext) {
    if (image_check(feid)) {
        $.ajaxFileUpload({
            url: Feng.ctxPath +"/shop/uploadImage",
            secureuri : false,
            fileElementId: feid,
            dataType: 'json',
            data: {fileType: ext},//增長推送的屬性
            type: 'post',
            async: true,
            complete: false,
            success:
                function (data) {
                    if (data.success){
                        $("#imageUrl").val(data.imagePath);
                        $("#showPic").attr("src", data.imagePath);
                    }
                    alert(data.message);
                },
            error:
                function (data) {
                    console.log(data);
                    console.log("error");
                }
        });
    }
};
function image_check(feid) { //本身添加的文件後綴名的驗證
    var img = document.getElementById(feid);
    return /.(jpg|png|gif|bmp)$/.test(img.value) ? true : (function () {
        Feng.info('圖片格式僅支持jpg、png、gif、bmp格式，且區分大小寫。');
        return false;
    })();
}

$(function() {
    Feng.initValidator("shopPictureForm", ShopPictureInfoDlg.validateFields);
});

contrller:

只是爲了返回數據,沒寫實質性文件保存

/**
     * 圖片上傳
     */
    @RequestMapping(method = RequestMethod.POST  ,value = "/uploadImage" )
    @ResponseBody
    public Object UploadImage(@RequestPart("file") MultipartFile file){
        //文件上傳暫時沒找到顯示返回自定義異常方法，使用正常數據返回
        Map<String,Object> result = new HashMap<>();
        String path = Class.class.getClass().getResource("/").getPath();
        path = path.replace("/target/classes/","/src/main/webapp/static/img/logo.png");
        result.put("success",true);
        result.put("message","上傳成功！");
        result.put("imagePath",path);
        return result;
    }