用ajax上傳圖片及java後臺接收問題

用ajax日後臺上傳圖片時,java

1. form表單標籤裏要加屬性:enctype="multipart/form-data";web

<div class="logo-div">
  <label class="col-md-1 control-label">圖片</label>
  <div class="col-md-2">
    <input type="file" id="logos" name="logos">
  </div>
  <label class="col-md-1 control-label">預覽</label>
  <div class="col-md-2">
    <img id="upload_images" src="" width="197px;" height="214px;">
  </div>
</div>ajax

$('#logos').change(function () {
  previewImgEvents();
});json

function previewImgEvents() {
// 根據這個 <input> 獲取文件的 HTML5 js 對象
var files = event.target.files, file;
if (files && files.length > 0) {
// 獲取目前上傳的文件
file = files[0];
// 來在控制檯看看到底這個對象是什麼
// 那麼咱們能夠作一下諸如文件大小校驗的動做
if (file.size > 1024 * 1024) {
alert('圖片大小不能超過 1MB!');
return false;
}
// !!!!!!
// 下面是關鍵的關鍵,經過這個 file 對象生成一個可用的圖像 URL
// 獲取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 經過 file 生成目標 url
var imgURL = URL.createObjectURL(file);
// 用這個 URL 產生一個 <img> 將其顯示出來
$('#upload_images').attr('src', imgURL);
// 使用下面這句能夠在內存中釋放對此 url 的伺服,跑了以後那個 URL 就無效了
// URL.revokeObjectURL(imgURL);
}
}app

2. ajax請求體裏,工具

------------------------------------------post

用formData裝上傳的圖片時的方式:url

var formData = new FormData();
var logo_file = document.getElementById("logos");
var logoFileObj = logo_file.files[0];orm

formData.append("logos", logoFileObj);對象

------------------------------------------

$.ajax({
  cache: false,
  type: 'post',
  url: SERVER_URL + "/xxx" +( "?APIType=3&Authorization=" + token),
  data:xxx,
  processData: false,
  contentType: false,
  success: function (data) {...

-----------------------------------------------------------------------------------------

data中可傳入的形式有:

1)

var form = new FormData(document.getElementById("formId"));
...
data: form,

2)

var formData = new FormData();
formData.append("key",value);
...
data: formData,

-----------------------------------------------------------------------------------------

3. java後臺接收時:(form和formData同樣)

@Transactional
@RequestMapping(value = "", method = RequestMethod.POST)
public int addHospital(Entity entity, MultipartFile logos) {

if (null != logos) {
if (logos.getSize() > 0) {
String imageSrc = uploadFile(logos, xxx.getxxx().toString());
if (!Misc.isNull(imageSrc)) {
xxx.setLogo(imageSrc.substring(imageSrc.lastIndexOf("/") + 1));
}
}
} else {
xxx.setLogo("default.jpg");
}

}

-----------------------------------------------------------------------------------------

若是formData傳入時,entity裏的一個屬性自己時一個實體,則單獨把這個實體的屬性值在js裏封裝起來,
總體放到formData裏,
var aaa = {
key: value,
key: value,
key: value,
...
};
var ht = JSON.stringify(aaa); -- 把aaa總體轉換成json。
formData.append("xxxs", ht); -- xxxs是在後臺實體裏新增的一個臨時字段:
@Transient
private String xxxs;

在java後臺接收時的處理:

String xxxs = qqq.getXxxs();JSONObject jsonObject = JSON.parseObject(xxxs);qqq.setXxx(JSONObject.toJavaObject(jsonObject, xxx.class)); -- xxx是實體裏的一個自己爲實體的屬性字段。(這樣就把單獨的這部分數據總體set到xxx裏了)(用的是:com.alibaba.fastjson下的類工具)。

相關文章
相關標籤/搜索