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" )@ResponseBodypublic 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;}