使用的都是layui.upload
这是写在HTML(普通上传图片): <div class="form-group"> <label class="col-sm-3 control-label">身份证正面照片:</label> <div class="col-sm-9"> <div class="layui-upload"> <button type="button" class="layui-btn" id="btncardPhoto">上传图片</button> <input id="cardPhoto" name="cardPhoto" type="hidden" value=""/> <div class="layui-upload-list"> <img class="layui-upload-img fieldimg" id="imgcardPhoto" src=""> </div> </div> </div> </div>
js:
//身份证上传图片-------------------- var url = ctx + 'common/upload'; var upload = layui.upload; //得到 upload 对象 layui.use('upload', function () { var upload = layui.upload; //执行实例 var uploadInst1 = upload.render({ elem: '#btncardPhoto' //绑定元素 , url: url //上传接口 , done: function (res) {//res可以在common/upload接口设置,我接收的是图片的访问路径 //上传完毕回调 if (res.msg == "操作成功") { $('#cardPhoto').val(res.url); $('#imgcardPhoto').attr("src",res.url); } } , error: function () { alert("上传失败~"); } }); //执行实例2 var uploadInst2 = upload.render({ ...此处省略以上重复代码 }); });
以下的上传看着舒服些:
<div class="form-group"> <label class="col-sm-3 control-label">营业执照照片:</label> <div class="col-sm-9"> <div class="w-h-100"> <div class="uploadForm"> <div id="upload"></div> </div> </div> </div> <input id="businessPhoto" name="businessPhoto" type="hidden"> </div> </div>
js:
var options = { path: ctx + 'common/upload/img?type=11', // 上传图片时指定的地址路径,类似form变淡的action属性 onSuccess: function(res) { // 上传成功后执行的方法,res是接收的ajax响应内容 res = JSON.parse(res); $('#businessPhoto').val(res.data); }, onFailure: function(res) { // 上传失败后执行的方法,res是接收的ajax响应内容 alert("上传失败~"); } }; $('#upload').on('change', function() { upload(); }); var upload= tinyImgUpload('#upload', options);//tinyImgUpload函数在tinyImgUpload.js里,请先引用
主要的坑就是上传的路径,有的项目图片的上传地址是固定的,请先更改: