HTML:
<div class="row"> <div class="qsc_img col-md-4"> <p class="qsc_img_del" style="display: none;"><i class="fa fa-close" onclick="del_img(this)"></i> </p> </div> <input type='file' onchange='previewImage(this)' style='display: none;' class='previewImg'>
<input type='hidde' value='id'>
<div class='preview col-md-8'> <a class="btn qsc_img_btn" onclick="img_self(this)">上传</a> <a class="qsc_img_example" data-example="qsc_example_business" href="javascript:;" title="示例">示例</a> </div> </div>
JS
function previewImage(file) { var self = $(file); var div = self.prev(".qsc_img"); var leg = div.find("img").length;
var formId = $('input["name=id"]') if(leg==1) { return; } if (file.files && file.files[0]) { var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function(evt){ $('<img src="' + this.result +'" class="imghead qsc_img_circle">').appendTo(div); }; var img = self.prev(".qsc_img").find('imghead'); //调用ajax;upload(formId); } }
//自动触发input类型为file的click事件 function img_self(thiz) { var self = $(thiz); self.parents(".preview").prev(".previewImg").trigger("click"); }
AJAX
function upload(id){ var form = new FormData(document.getElementById(id)); $.ajax({ url:"url", type:"post", data:form, processData:false, contentType:false, dataType:"json", success:function(data){ if(data.msg==200){ swal({ title: "", html: false, text: "上传菜单图片成功", type: "success", showCancelButton: false, confirmButtonText: "确定", closeOnConfirm: true }; }else{ swal({ title: "", html: false, text: "上传菜单图片失败", type: "error", showCancelButton: false, confirmButtonText: "确定", closeOnConfirm: true }); } }, error:function(e){ alert("错误!!"); } }); }
![](https://images2017.cnblogs.com/blog/813612/201709/813612-20170904122149366-544677848.jpg)