>因为在写项目中有上传图片的需求,查找了一些Ajax上传图片的插件,发现一般都是过大,所以自己编写一个。 ### 创建Ajax图片上传 upload.ajax.js ```javascript /** 图片上传js 参数:responseStr 返回值 方法: create 图片上传: 参数type(上传类型) file(input=file资源) upload.create('avatar', $(this)[0].files[0]); remove 移除图片:参数type(上传类型) file(要删除的图片名) upload.remove('avatar', $('img').text()); 回执:upload.responseStr */ var upload = { responseStr : null, create : function(type, file) { // FormData 对象 var formData = new FormData(); formData.append("_token", window.Laravel.csrfToken); // 可以增加表单数据 formData.append("type", type); // 可以增加表单数据 formData.append("file", file); // 文件对象 $.ajax({ type : "POST", url : "/admin/upload/store", data : formData, async : false, //设置异步,用户回调 processData : false, //必须false才会避开jQuery对 formdata 的默认处理 ,XMLHttpRequest会对 formdata 进行正确的处理 contentType : false, //必须false才会自动加上正确的Content-Type success : function(responseStr) { if(responseStr.success != 1) { alert(responseStr.message); return false; } upload.responseStr = responseStr; }, error : function(responseStr) { alert("失败:" + JSON.stringify(responseStr)); //将json对象转成 json字符串。 } }); }, remove : function(type, file) { var formData = { '_token' : window.Laravel.csrfToken, 'type' : type, 'file' : file, }; $.ajax({ type : 'POST', url : '/admin/upload/destroy', data : formData, async : false, //设置异步,用户回调 success : function(responseStr) { if(responseStr.success != 1) { alert(responseStr.message); } upload.responseStr = responseStr; }, error : function(responseStr) { alert("失败:" + JSON.stringify(responseStr)); //将json对象转成 json字符串。 } }); } }; ``` ### 使用方法 图片上传