一、具體需求如圖所術：
![在這裏插入圖片描述]()
二、html代碼：
<form class="form form-horizontal" id="form-product-add" method="post" enctype="multipart/form-data">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品名稱：</label>
<div class="formControls col-xs-8 col-sm-10">
<input type="text" class="input-text" value="" placeholder="" id="p_name" name="p_name">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品主圖：</label>
<div class="formControls col-xs-8 col-sm-2">
<img id="plsod" style="display:none; border-color:#333; border-style:solid; border-width:1px;" width="80px" height="60px">
<input type="file" id="file1d" name="myFile" />
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品規格：</label>
<div class="formControls col-xs-4 col-sm-4">
<input type="text" class="input-text" value="" placeholder="" id="norms" name="norms">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品基本單位：</label>
<div class="formControls col-xs-4 col-sm-4">
<input type="text" class="input-text" value="" placeholder="" id="unit" name="unit">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>大單位與基本單位換算：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text" value="" placeholder="" id="ratio" name="ratio">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品大單位：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text" value="" placeholder="" id="big_unit" name="big_unit">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品現銷售價格：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text ykprice" value="" placeholder="" id="price" name="price">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品現進貨價：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text ykprice" value="" placeholder="" id="i_price" name="i_price">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>現會員價：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text ykprice" value="" placeholder="" id="m_price" name="m_price">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品排序：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text" value="" placeholder="" id="p_sort" name="p_sort" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品簡介：</label>
<div class="formControls col-xs-8 col-sm-4">
<input type="text" class="input-text" value="" placeholder="" id="p_info" name="p_info">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品狀態：</label>
<div class="formControls col-xs-8 col-sm-4"> <span class="select-box" style="width:150px;">
<select class="select" name="p_status" size="1" id="p_status">
<option value="">--請選擇--</option>
<option value="1">可進貨</option>
<option value="0">可銷售</option>
</select>
</span>
</div>
</div>
<textarea id="val_content" style="display:none;" ></textarea>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>商品詳情：</label>
<div class="formControls col-xs-8 col-sm-10">
<script id="editor" name="p_content" type="text/plain" style="width:100%;height:200px;"></script>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
<button id="productadd" class="btn btn-primary radius" type="button"><i class="Hui-iconfont">Θ</i> 保存並提交審覈</button>
<button onClick="layer_close();" class="btn btn-default radius" type="button" style="float: right;"> 取消 </button>
</div>
</div>
</form>
三、js代碼
//圖片預覽效果，緩存圖片顯示
$("#file1d").change(function(){
var objUrl = getObjectURL(this.files[0]);
if (/\w+([.jpg|.png|.gif|.swf|.bmp|.jpeg]){1}$/.test(this.files[0].type)) {
//var f = document.getElementById("file1d").files[0];
// 創建對象
var img = new Image();
// 改變圖片的src
img.src = objUrl;
// 加載完成執行
img.onload = function(){
var w = img.width,
h = img.height,
quotient=w/h;
quotient = quotient.toFixed(2);
//console.log(quotient);return;
if(quotient>1.69 ||quotient<1.68 ){
layer.msg('圖片尺寸不對！請上傳合格的圖片！',{icon:2,time:2000});
return;
}
$('#plsod').attr('src',objUrl);
if ($('#plsod').src!='') {
document.getElementById('plsod').style.display='block';
}else{
document.getElementById('plsod').style.display='none';
}
}
}else{
layer.msg('圖片類型必須是gif,jpeg,jpg,png中的一種！',{icon:2,time:1100});
}
})
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined){ // basic
url = window.createObjectURL(file) ;
}else if (window.URL!=undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
}else if (window.webkitURL!=undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
var r = window.location.search.substr(1).match(reg); //匹配目標參數
if (r != null) return unescape(r[2]); return null; //返回參數值
}
//點擊按鈕“保存並提交審覈”時觸發提交請求
$('#productadd').click(function(){
var src=$('#plsod').attr('src');
var patt1 = new RegExp("blob:");
if ( patt1.test(src) ){
//獲取html內容，返回: <p>hello</p>
var content=ue.getContent();
var p_content =content;//文章內容
var arr = new Array();
arr['p_img'] = document.getElementById("file1d").files[0];
arr['p_name'] = $('#p_name').val();
arr['norms'] = $('#norms').val();
arr['unit'] = $('#unit').val();
arr['ratio'] = $("#ratio").val();
arr['big_unit'] = $('#big_unit').val();
arr['price'] = $('#price').val();
arr['i_price'] = $("#i_price").val();
arr['m_price'] = $('#m_price').val();
arr['p_info'] = $('#p_info').val();
arr['p_sort'] = $("#p_sort").val();
arr['p_status'] = $("#p_status").val();
arr['p_content'] =p_content;
var formData = new FormData();
if(arr['p_name'] == ''){
layer.msg('請填寫商品名稱！',{icon:2,time:2000});
}else if(arr['p_img'] == undefined){
layer.msg('請上傳縮略圖！',{icon:2,time:2000});
}else if(arr['norms'] == ''){
layer.msg('請填寫規格！',{icon:2,time:2000});
}else if(arr['unit'] == ''){
layer.msg('請填寫基本單位！',{icon:2,time:2000});
}else if(arr['ratio'] == ''){
layer.msg('請填寫大單位與基本單位換算！',{icon:2,time:2000});
}else if(arr['big_unit'] == ''){
layer.msg('請填寫商品大單位！',{icon:2,time:2000});
}else if(arr['price'] == ''){
layer.msg('請填寫進貨價！',{icon:2,time:2000});
}else if(arr['i_price'] == ''){
layer.msg('請填寫銷售價！',{icon:2,time:2000});
}else if(arr['m_price'] == ''){
layer.msg('請填寫會員價！',{icon:2,time:2000});
}else{
formData.append("p_img",arr['p_img']);
formData.append("p_name",arr['p_name']);
formData.append("norms",arr['norms']);
formData.append("unit",arr['unit']);
formData.append("ratio",arr['ratio']);
formData.append("big_unit",arr['big_unit']);
formData.append("price",arr['price']);
formData.append("i_price",arr['i_price']);
formData.append("m_price",arr['m_price']);
formData.append("p_info",arr['p_info']);
formData.append("p_sort",arr['p_sort']);
formData.append("p_status",arr['p_status']);
formData.append("p_content",arr['p_content']);
$.ajax({
type:"POST",
url:"{:url('product/product_insert')}",
data:formData,
contentType: false, // 注意這裏應設爲false，不可缺少
processData: false, // 注意這裏應設爲false，不可缺少
cache: false, // 注意這裏應設爲false，不可缺少
success:function(data){
var JSON = new Function('return'+data )();
if (JSON.code == 200) {
layer.msg('上傳成功！',{icon:1,time:1100});
setTimeout(function(){
parent.location.reload();
},1000);
}else{
layer.msg('上傳失敗，請重新上傳！',{icon:2,time:2000});
}
},
error:function(){
layer.msg('上傳失敗，請重新上傳！',{icon:2,time:2000});
}
})
}
}else{
layer.msg('請上傳縮略圖！',{icon:2,time:2000});
}
})
四、控制器php代碼：
public function product_insert(){
//獲取圖片文件
$file = request()->file('p_img');
if($file){
//存儲圖片（上傳圖片）到public/static/img_product目錄下面，加上rule('uniqid')表示不生成當天日期爲名的文件，如果不加這個，那麼上傳的圖片會保存在'public/static/img_product/20190912/‘這樣結構的目錄下面
$info = $file->rule('uniqid')->move(ROOT_PATH . 'public/static/img_product/');
if($info){
//如果上傳成功，獲取這個圖片的名稱，然後把圖片名和其他數據傳到模型進行添加
$name = $info->getFilename();
//獲取其他所有數據信息
$arr = request() -> post();
$res=ProductModel::product_insert($arr,$name);
if($res){
$data = [
'code' => 200,
'msg'=>'添加成功！',
];
}else{
$data=[
'code'=>400,
'msg'=>'添加失敗',
];
}
}
}else{
$data=[
'code'=>400,
'msg'=>'添加失敗',
];
}
return json_encode($data);
}
