今天小编就为大家分享一篇laravel框架上传图片实现实时预览功能，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧。

在laravel框架中上传图片并实时预览，其实并没有那么难，下面给大家展示一下；

HTML代码：

1. <img class="pic house-a" οnclick="houseImgOne(this)" name="house_img_one" id="house_img_one" src=""> 
2. <input type="file" name="house_img_one" id="house_img_one1" multiple="multiple" style="display:none;"> 

controller代码：

1. public function upload($photo) 
2.  { 
3.    $file_ex = $photo->getClientOriginalExtension(); 
4.    if (!in_array($file_ex, array('jpg', 'gif', 'png', 'jpeg'))) { 
5.      echo "<script>alert('文件格式错误,仅支持 jpg ,gif,png,jpeg');location.href='/apply'</script>"; 
6.    } 
7.    $newname = date('Ymdhis') . rand(1, 999) . "." . $file_ex; 
8.    $savepath = config('constants.img_uf') .'Uploads/Apply/'; 
9.    $path = $photo->move($savepath, $newname); 
10.    $filepath = "UF/Uploads/Apply/" . $newname; 
11.    return $filepath; 
12.  } 

这里是把上传，封装成了一个方法，添加的时候直接添加最后的路径就可以了；

js代码：

1. var _btnId = ''; 
2. function houseImgOne(_this){ 
3.   _btnId = $(_this).attr('id'); 
4.   $('#house_img_one1').click(); 
5.   $("#house_img_one1").change(function () { 
6.     var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径 
7.     if (objUrl) { 
8.       $("#" + _btnId).attr("src", objUrl); //将图片路径存入src中，显示出图片ai 
9.     } 
10.   }); 
11. } 
12. /建立一个可存取到该file的url 
13. function getObjectURL(file) { 
14.   var url = null; 
15.   if (window.createObjectURL != undefined) {  
16.     url = window.createObjectURL(file); 
17.   } else if (window.URL != undefined) {  
18.     url = window.URL.createObjectURL(file); 
19.   } else if (window.webkitURL != undefined) {  
20.     url = window.webkitURL.createObjectURL(file); 
21.   } 
22.   return url; 
23. } 

效果图片：

Tags: laravel上传图片 laravel实时预览

分享到：