表单通过ajax上传图片文件，无刷新显示缩略图

我们有时候上传表单时希望将表单中的文件提前上传，然后根据服务器返回的上传图片的路径，显示缩略图。如下图所示，选中文件即显示缩略图：

如何实现呢？这里我们采用两种方法，第一种采用原生ajax的方式，第二种采用jQuery的ajax方式。

第一种方式：原生ajax的方式

//前端部分代码<form id="art_form" action="{{url('admin/article')}}" method="post" enctype="multipart/form-data"> {{csrf_field()}} <input type="text" size="50" name="art_thumb" id="art_thumb"> <input id="file_upload" name="file_upload" type="file" multiple="true"> <p><img id="img1" alt="上传后显示图片" style="max-width:350px;max-height:100px;" /></p> <input type="submit" value="提交"></form><script type="text/javascript">//当文件值改变时触发 uploadImage()函数$(function () { $("#file_upload").change(function () { uploadImage(); })})function uploadImage() { //获取表单元素 var formElement = document.querySelector("#art_form"); //生成formData对象，并将表单元素传入 var formData = new FormData(formElement); //创建xhr对象用于ajax var request = new XMLHttpRequest(); //监听响应状态变化 request.onreadystatechange=function() { if (request.readyState==4 && request.status==200) { //console.log(request.responseText); //将服务器返回的图片路径赋值给img的src属性 $('#img1').attr('src','/'+request.responseText);//文本框显示图片路径 $('#art_thumb').val(request.responseText); } } //以post方式向/admin/upload路由发送请求 request.open("POST", "/admin/upload"); //发送请求 request.send(formData);}</script> // 服务器端代码 public function upload() { //获取上传的文件对象 $file = Input::file('file_upload'); //判断文件是否有效 if($file->isValid()){ $entension = $file->getClientOriginalExtension();//上传文件的后缀名 $newName = date('YmdHis').mt_rand(1000,9999).'.'.$entension; $path = $file->move(base_path().'/uploads',$newName); $filepath = 'uploads/'.$newName; //返回文件的路径 return $filepath; } }

第二种方式：jQuery的ajax的方式

//前端部分代码<form id="art_form" action="{{url('admin/article')}}" method="post" enctype="multipart/form-data"> {{csrf_field()}} <input type="text" size="50" name="art_thumb" id="art_thumb"> <input id="file_upload" name="file_upload" type="file" multiple="true"> <p><img id="img1" alt="上传后显示图片" style="max-width:350px;max-height:100px;" /></p> <input type="submit" value="提交"></form> <script type="text/javascript"> $(function () { $("#file_upload").change(function () { uploadImage(); }) }) function uploadImage() {// 判断是否有选择上传文件 var imgPath = $("#file_upload").val(); if (imgPath == "") { alert("请选择上传图片！"); return; } //判断上传文件的后缀名 var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1); if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') { alert("请选择图片文件"); return; } var formData = new FormData($('#art_form')[0]); $.ajax({ type: "POST", url: "/admin/upload", data: formData, contentType: false, processData: false, success: function(data) { $('#img1').attr('src','/'+data); $('#art_thumb').val(data); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("上传失败，请检查网络后重试"); } }); }</script> // 服务器端代码 public function upload() { //获取上传的文件对象 $file = Input::file('file_upload'); //判断文件是否有效 if($file->isValid()){ $entension = $file->getClientOriginalExtension();//上传文件的后缀名 $newName = date('YmdHis').mt_rand(1000,9999).'.'.$entension; $path = $file->move(base_path().'/uploads',$newName); $filepath = 'uploads/'.$newName; //返回文件的路径 return $filepath; } }

第二种方式一定要注意 加上contentType: false,processData: false,不然会报这种错误

猜你喜欢