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;
    }