js
// 在需要使用的js文件中,导入js var util = require('../../../utils/util.js'); var app = getapp(); page({ data: { pics:[],//存放选中图片数组 photos: "../../../img/camera.jpg",//默认点击图片 filenames:""// }, touchphoto: function (e) {//点击选择图片事件 var that = this var pic = this.data.pics; wx.chooseimage({ count: 9 - pic.length, //图片数量 默认9 sizetype: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourcetype: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempfilepath可以作为img标签的src属性显示图片 var tempfilepaths = res.tempfilepaths; pic = pic.concat(tempfilepaths); that.setdata({ pics:pic, //如果上传单张图片的话可以取消这个
photos:tempfilepaths //如果上传单张图片的话,可以用这个 }) } }) }, sendfile: function (e) {//多图片上传 var paths = this.data.pics;//获取上传数组 for (var index in paths){//循环这个数组 var filep = ""; filep = filep + paths[index];//获取当前循环到的图片 wx.uploadfile({ url: app.globaldata.api_url + '/uploadfilewx', filepath: filep, name: 'file',//名称根据自己情况取 formdata: {//除了要上传的附件外。其他额外要传的参数 'user': 'admin' }, success: function (res) {//上传成功方法 wx.showtoast({ title: '上传成功', icon: 'success', duration: 2000 }) } }) } }, onload: function () { } })
css样式
.ph{ width: 200rpx; height: 200rpx; border: 1px solid #909090; margin-left:14%; border-radius: 20rpx; } .ph1{ width: 200rpx; height: 200rpx; border: 1px solid #909090; margin-left:5%; float: left; border-radius: 20rpx; margin-top: 5%; margin-bottom: 5%; } .btn{ background: #335c8f; color: #fff; margin-left:40rpx; margin-right: 40rpx; width: 90%; }
java后台代码
@requestmapping(value = "/uploadfile", method = requestmethod.post) public @responsebody object uploadfile(httpservletrequest request, httpservletresponse response, @requestparam(value = "file", required = false) multipartfile file, @requestparam(value = "user") string user,model model) { try { request.setcharacterencoding("utf-8"); if (!file.isempty()) { system.out.println("成功获取照片"); string filename = file.getoriginalfilename(); string path = null; string type = null; type = filename.indexof(".") != -1 ? filename.substring(filename.lastindexof(".") + 1, filename.length()) : null; if (type != null) {//类型验证,如果不需要验证的话,也可以取消这一步 if ("gif".equals(type.touppercase()) || "png".equals(type.touppercase()) || "jpg".equals(type.touppercase())) { // 项目在容器中实际发布运行的根路径 string realpath = request.getsession().getservletcontext().getrealpath("/"); // 自定义的文件名称 string truefilename = string.valueof(system.currenttimemillis()) + filename; // 设置存放图片文件的路径 path = realpath + "/resources/wxfile/" + truefilename; file.transferto(new file(path)); model.addattribute("resultcode", "200"); } else { system.out.println("不是我们想要的文件类型,请按要求重新上传"); model.addattribute("resultcode", "300"); } } else { system.out.println("文件类型为空"); model.addattribute("resultcode", "300"); } } else { system.out.println("没有找到相对应的文件"); model.addattribute("resultcode", "erro"); } } catch (ioexception e) { e.printstacktrace(); } return model; }
看完是不是觉得特别简单?
上一篇: web前端css定位position和起浮float
下一篇: 如何成为一位「不那么差」的程序员