当前位置： 移动技术网 > IT编程>开发语言>Java > jquery file upload使用

jquery file upload使用

2018年08月29日  | 移动技术网IT编程  | 我要评论

 

<!-- jquery file upload相关js -->

<script src="/js/jquery-file-upload/js/jquery.ui.widget.js"></script>
<script src="/js/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<script src="/js/jquery-file-upload/js/jquery.fileupload.js"></script>
<script src="/js/jquery-file-upload/js/jquery.fileupload-process.js"></script>
<script src="/js/jquery-file-upload/js/jquery.fileupload-validate.js"></script>
<link rel="stylesheet" href="/js/jquery-file-upload/css/jquery.fileupload.css">
<link rel="stylesheet" href="/js/jquery-file-upload/css/jquery.fileupload-ui.css">

 

$('#upload_cover').fileupload({
　　url: '/img/upload',
　　acceptfiletypes: /(\.|\/)(png)$/i,//文件后缀控制
　　maxnumberoffiles: 1,//最大上传文件数目
　　maxfilesize: 50000,
　　datatype: 'json',//期望从服务器得到json类型的返回数据
　　messages : {//文件错误信息
　　acceptfiletypes : '文件类型不匹配',
　　maxfilesize : '文件过大',
　　},processfail: function (e, data) {
　　　　var currentfile = data.files[data.index];
　　　　if (data.files.error && currentfile.error) {
　　　　　　console.log(currentfile.error);
　　　　　　$('#error').text(currentfile.error);
　　　　}
　　},
　　done: function (e, data) {
　　　　$('#imgurl').val(data.result.fileurl);
　　　　$('#error').text("");
　　},
　　fail: function (e, data) {
　　　　$('#error').text("上传失败！"+data.files.error);
　　}
});

 

<!--html代码,样式使用bootstrap-->

<div class="form-group ">

　　<label class="control-label col-lg-2"></label>

　　<div class="col-sm-5">

　　　　<span class="btn btn-success fileinput-button">选择<input type="file" id="upload_cover" /></span>

　　　　 <font color="red" id="error"></font><br/>
　　</div>
</div>
<div class="form-group ">
　　<label class="control-label col-lg-2">imgurl<font color="red">*</font></label>
　　<div class="col-lg-10">
　　　　<input type="text" name="imgurl" id="imgurl" class="form-control" placeholder="请选择" value="" readonly="readonly"/>
　　</div>
</div>

<!--服务端代码-->

@requestmapping(value = "/img/upload", method = { requestmethod.post })
public void toupload(httpservletrequest request, httpservletresponse response, modelmap model) throws exception {
　　// 创建一个通用的多部分解析器
　　commonsmultipartresolver multipartresolver = new commonsmultipartresolver(request.getsession().getservletcontext());
　　// 新建目录
　　string savepath = constans.file_upload_path + constans.img_folder;
　　file directory = new file(savepath);
　　if (!directory.exists()) {
　　　　directory.mkdirs();
　　}
　　try {
　　　　// 判断 request 是否有文件上传,即多部分请求
　　　　if (multipartresolver.ismultipart(request)) {
　　　　　　// 转换成多部分request
　　　　　　multiparthttpservletrequest multirequest = (multiparthttpservletrequest) request;
　　　　　　// 取得request中的所有文件名
　　　　　　iterator<string> iter = multirequest.getfilenames();
　　　　　　while (iter.hasnext()) {
　　　　　　　　// 取得上传文件
　　　　　　　　multipartfile file = multirequest.getfile(iter.next());
　　　　　　　　if (file != null) {
　　　　　　　　　　// 取得当前上传文件的文件名称
　　　　　　　　　　string myfilename = file.getoriginalfilename();
　　　　　　　　　　if (myfilename.trim() != "") {
　　　　　　　　　　　　// 定义上传路径
　　　　　　　　　　　　string tarpath = savepath + myfilename;
　　　　　　　　　　　　file localfile = new file(tarpath);
　　　　　　　　　　　　file.transferto(localfile);
　　　　　　　　　　　　model.addattribute("fileurl", tarpath);
　　　　　　　　　　　　model.addattribute("filename", myfilename);
　　　　　　　　　　}
　　　　　　　　}

　　　　　　}

　　　　}
　　　　logger.info(">>> upload complete");
　　} catch (exception e) {
　　　　e.printstacktrace();
　　　　logger.info(">>> upload error");
　　} finally {
　　　　response.setcontenttype("application/json; charset=utf-8");
　　　　response.setcharacterencoding("utf-8");
　　　　printwriter pw = response.getwriter();
　　　　pw.print(new gson().tojson(model));
　　　　pw.flush();
　　　　pw.close();
　　}

}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网