有人用过ajaxfileupload上传图片，然后用Jcrop去截图的么？有个问题请教下！
我用AjaxFileUpload把图片传上去了，然后返回图片的上传路径到前台<img>标签里，为什么返回的高度宽度都是0，然后自动生成的<div>下面的<img>标签也没有获取到src属性
/**
* 文件上传
* @param file
* @param request
* @param response
* @return
*/
@RequestMapping(value = "/uploadFile.do")
public @ResponseBody Map<String,Object> uploadFile(@RequestParam(value = "apkFile") MultipartFile file,HttpServletRequest request, HttpServletResponse response) {
Map<String,Object> resMap = new HashMap<String,Object>();
//String classPath = this.getClass().getClassLoader().getResource("/").getPath();
String classPath = request.getRealPath("/");
if (file != null) {
if (file.isEmpty()) {
// 未选择文件
resMap.put("status", "未选择文件");
} else{
// 文件原名称
String originFileName = file.getOriginalFilename();
try {
//这里使用Apache的FileUtils方法来进行保存
FileUtils.copyInputStreamToFile(file.getInputStream(),
new File(classPath+uploadDir, originFileName));
resMap.put("status","ok");
resMap.put("imgUrl","../"+uploadDir+originFileName);
} catch (IOException e) {
resMap.put("status", "文件上传失败!");
e.printStackTrace();
}
}
}
return resMap;
}<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="../resources/css/jquery.Jcrop.min.css" type="text/css" />
<!-- <script src="../resources/js/common/jquery-1.11.3.js" type="text/javascript"></script> -->
<script src="http://edge1u.tapmodo.com/global/js/jquery.min.js"></script>
<script src="../resources/js/common/ajaxfileupload.js" type="text/javascript"></script>
<script src="../resources/js/fileupload.js" type="text/javascript"></script>
<script src="../resources/js/common/jquery.Jcrop.js"></script>
<title>上传头像</title>
</head>
<body>
当前用户: ${userName}
<input id="userId" value="${userId }" type="hidden" />
<div id="addApkWindows">
<div id="result"></div>
上传文件： <input type="file" id="apkFile" name="apkFile" /> <input
type="button" value="上传" onclick="ajaxFileUpload()" />
</div>
<form id="form_save" action="/user/save_portrait" style="display: none;">
<input type="hidden" id="img_left" name="left" value="0"> <input
type="hidden" id="img_top" name="top" value="0"> <input
type="hidden" id="img_width" name="width" value="0"> <input
type="hidden" id="img_height" name="height" value="0"> <input
type="hidden" id="img_rd" name="rd" value="0">
</form>
<img src="" id="target" />
</body>
</html>$(function() {
$('#target').Jcrop();
});
function ajaxFileUpload() {
//获取软件更新详情
var apkIntroduce = $("#apkInfo").val();
//开始上传文件时显示一个图片,文件上传完成将图片隐藏
//$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
//执行上传文件操作的函数，使用encodeURI方法，防止传输中文字符的时候出现乱码
var uploadUrl = encodeURI(encodeURI("uploadFile.do?apkIntroduce="
+ apkIntroduce));
$.ajaxFileUpload({
//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
url : uploadUrl,
// url:basePath + "uploadApk.do?apkIntroduce="+apkIntroduce,
secureuri : false, //是否启用安全提交,默认为false
fileElementId : 'apkFile', //文件选择框的id属性
dataType : 'text', //服务器返回的格式,可以是json或xml等
success : function(data, status) { //服务器响应成功时的处理函数
var dataset = $.parseJSON(data);
if (dataset.status == "ok") {
$('#result').html("Apk上传成功");
$('#target').attr("src", dataset.imgUrl);
} else if (dataset.status == "parm_is_empty") {
$('#result').html("没有选择APK！");
} else {
$('#result').html('Apk上传失败，请重试！！');
}
},
error : function(data, status, e) { //服务器响应失败时的处理函数
console.log(e);
console.log(data);
$('#result').html('APK上传失败，请重试！！');
}
});
$('#target').Jcrop();
}
这是页面效果图
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
可以去看下开源中国的头像上传。