java ajaxupload 使用_java 项目使用 ajaxfileupload

html

#oDiv {

height: 200px;

width: 200px;

border: 1px solid #000;

text-align: center;

margin-bottom: 10px;

}

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 ,所以获取的数据回带上

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); //给的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 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;

}