无双科技

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

时间:2018-12-07 13:40:34 出处:无双科技

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


如何实现呢?这里我们采用两种方法,第一种采用原生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="上传后显示图片"  /></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="上传后显示图片"  /></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,
不然会报这种错误


猜你喜欢