<img src="" id="target" width="400" height="400" alt="未选择图片"/>
</div>
</dd>
</dl>
</dd>
<input type="hidden" id="filePathInput" value=""/>
<dd class="dialogBottom">
<a class="btnBlue btn_confirm" href="javascript:;" onclick="photoSummit();"><span class="text">确定</span><b class="bgR"></b></a>
<a class="btnGray btn_cancel" href="javascript:;" onclick="hideDialog();"><span class="text">取消</span><b class="bgR"></b></a>
</dd>
</dl>
1.选择图片
<img src="" id="target" width="400" height="400" alt="未选择图片"/>
2.提交:首先大家知道文件上传的时候用到的标签为:<input type=”file”/> 但是有时候我们需要用ajax提交文件并且异步提交,我们如果是用form表单提交的话就不是异步,这样我们回到页面就刷新页面,非常的不方便,但是现在ajax还不能支持文件提交的方式,这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件,代码为:
$("#fileUp").<span style="color:#ff0000;">ajaxSubmit</span>({
type: "POST",
url:"/file/img/upload",
dataType: "json",
contentType:"application/json",
success: function(parameter){
$("#target2").attr('src','/upload/'+parameter.fileName);
$("#filePathInput").val('/upload/'+parameter.fileName);
if($("#format").text()=="重新上传"){
jcrop_api.destroy()
}
$("#format").text("重新上传");
//启动jcrop支持
openJcrop('/upload/'+parameter.fileName);
},
error : function(data) {
alert("ajax传输发生错误!!!");
}
});
这样就能将文件用ajax的方式提交到后台,注意这里用的是ajaxSubmit,这个方法对应jquery-form.js,后台代码为:
package com.quanshi.ums.gate.view.rest.controllers;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.quanshi.ums.gate.persistence.entities.Parameters;










