使用ajax实现文件上传，使用input实现本地图片展示
一、实现本地图片预览
HTML:
<input type="file" id="chooseImage" name="myfile" value="" class="layui-btn"><!-- 保存用户自定义的背景图片 --><img style="width: 150px;height: 150px;display: none" id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>
JS：（使用JQuery）
$(function (){$('#chooseImage').on('change',function(){if ($(this)[0].files[0]==null){$('#cropedBigImg').css("display","none");}else {var filePath = $(this).val(), //获取到input的value，里面是文件的路径fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式// 检查是否是图片if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {$('#cropedBigImg').css("display","none");error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');return;}// $('#cropedBigImg').attr('src',src);$('#cropedBigImg').attr('src',src).css("display","inline-block");}});})
样式展示：
二、AJAX上传文件
关键代码：
var formData = new FormData();formData.append("myfile", $("#chooseImage")[0].files[0]);//ajax参数：$.ajax({type: "post",url: "/index/reviseAdminInfo",data: formData,cache: false, //上传文件不需要缓存processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置Content-Type请求头success: function(data){})}
全部代码：
var formData = new FormData();if($("#chooseImage")[0].files[0]!=null){formData.append("myfile", $("#chooseImage")[0].files[0]);}formData.append("adminUserName",data.field.adminUserName);formData.append("adminPassword",data.field.adminPassword);formData.append("adminId",data.field.adminId);$.ajax({type: "post",url: "/index/reviseAdminInfo",data: formData,cache: false, //上传文件不需要缓存processData: false, // 告诉jQuery不要去处理发送的数据contentType: false, // 告诉jQuery不要去设置Content-Type请求头success: function(data){console.log(data==="1")if (data==="1"){layer.msg("修改成功",{icon: 1,time: 1500 //2秒关闭（如果不配置，默认是3秒）},function (){miniTab.deleteCurrentByIframe();})}else {layer.msg("修改失败",{icon: 2,time: 2000 //2秒关闭（如果不配置，默认是3秒）})}},error: function (){layer.msg("修改失败",{icon: 2,time: 2000 //2秒关闭（如果不配置，默认是3秒）})}});time: 2000 //2秒关闭（如果不配置，默认是3秒）})}});
