thinkphp5通过ajax上传图片并预览

一、具体需求如图所术：
二、html代码：
三、js代码
四、控制器php代码：

一、具体需求如图所术：

二、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;">&nbsp;&nbsp;取消&nbsp;&nbsp;</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();// 改变图片的srcimg.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){ // basicurl = window.createObjectURL(file) ;}else if (window.URL!=undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file) ;}else if (window.webkitURL!=undefined) {// webkit or chromeurl = 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);
}

thinkphp5通过ajax上传图片并预览相关推荐

ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
javascript --- [FormData的使用] 文件上传进度条展示文件上传图片即使预览
1. 准备工作因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源使用express将pu ...
h5页面上传图片java_[Java教程]h5上传图片及预览_星空网
h5上传图片及预览 2016-04-22 0 第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需 ...
python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
JavaScript上传图片及时预览
JavaScript上传图片及时预览 /*******************************正面图片上传预览开始****************************/ f ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列谷歌火狐等浏览器注意:不支持safari 插件使用说明: 1.必须引用jquery ...
js上传图片进行预览
js上传图片进行预览上传图片经常遇到这样的问题,就是需要实现预览,由于浏览器的安全机制,不能直接读取本地文件,所以需要使用js绕一圈实现预览效果 HTML代码如下 <input type=&q ...

thinkphp5通过ajax上传图片并预览

thinkphp5通过ajax上传图片并预览

一、具体需求如图所术：

二、html代码：

三、js代码

四、控制器php代码：

thinkphp5通过ajax上传图片并预览相关推荐

最新文章

热门文章