160616、jQuery插件之ajaxFileUpload及jqueryeasyui学习资料分享
第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序，ajaxFileUpload插件依赖jquery
<script src="${base}/mobile/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="${base}/mobile/js/ajaxfileupload.js" type="text/javascript"></script>
第二步：test.html（省略无关项）
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() { $.ajaxFileUpload
(
{
url: 'upload.jspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'fileVideo', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#imgSuccess").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>
<body>
<p><input type="file" id="fileVideo" name="file" /></p> <input type="button" value="上传" />
<p><img id="imgSuccess" alt="上传成功啦" src="" /></p>
</body>
第三步：java（我这里是上传到其他平台的接口，不用做参考）
@requestMapping("/upload.jspx")
public String upload(@RequestParam(required=false) MultipartFile file,HttpServletRequest request){
String message = null;
if(file.isEmpty()){
return null;
}
String originalFilename = file.getOriginalFilename();
String realName = request.getSession().getServletContext().getRealPath(file.getOriginalFilename());
int i = realName.indexOf(originalFilename);
String dir = realName.substring(0, i);
File f = new File(dir,originalFilename);
if(!f.exists()){
f.mkdirs();
}
try {
file.transferTo(f);
String actionUrl = PropertyUtils.getPropertyValue(new File(realPathResolver.get(Constants.XXXXX)), BACK_UPLOAD);
String returnUrl = com.fire.back.utils.UploadUtils.SubmitPost(actionUrl, originalFilename, "", dir);
return returnUrl;
} catch (Exception e) {
message = "上传录音出错";
log.error(message,e);
return null;
}
}
基于jquery的jqueryeasyui（类似于extjs）学习资料http://pan.baidu.com/s/1o8Koj9K
