本文展示了ThinkPHP6 上傳圖片程式碼demo, 程式碼親測可用.

HTML部分程式碼

 <tr>

     <th class="font-size-sm" style="width:15%;height:100px;">商品圖片</th>

     <td>

         <div class="custom-file">

             <div id="uploadImage" style="width:100px;height:100px;display: inline;"></div>

             <button id="uploadBtn" class="btn btn-outline-info font-size-sm">選擇圖片</button>
 

             <input type="file" name="imgFile" id="imgFile" style="display: none;">

         </div>

     </td>

 </tr>

JS部分程式碼

 $(document).ready(function(){

 varinput=$("#imgFile");

 //將上傳按鈕繫結到input['file']上

 $("#uploadBtn").click(function(){

 input.trigger("click");

 });

 input.change(function(){
 

 //如果value不為空，呼叫檔案載入方法

 if($(this).val()!==""){

 doUpload(this);

 }

 });

 });

 //上傳圖片

 varSCOPE={

 'uploadUrl':'{:url("'+urlPath+'/upload")}',

 };

 functiondoUpload(){

 varformData=newFormData($("#myform")[0]),

 appendDiv=$("#uploadImage"),

 imageUrl='',

 imageDiv='';

 $.ajax({

 url:SCOPE.uploadUrl,

 type:'POST',
 

 data:formData,

 async:false,

 cache:false,

 contentType:false,

 processData:false,

 success:function(result){

 if(result.status===1){

 appendDiv.empty();

 imageUrl='/storage/'+result.data;

 imageDiv='';

 appendDiv.append(imageDiv);

 }

 },

 });

 }

ThinkPHP中的上傳方法

 /**

 *圖片上傳(ajax)

 *@return\think\Response|void

 *@throws\Exception

 */

 publicfunctionupload()

 {

 //獲取表單上傳檔案例如上傳了001.jpg

 $file=request()->file('imgFile');

 try{

 //驗證

 validate(['imgFile'=>[

 'fileSize'=>410241024,

 'fileExt'=>'jpg,jpeg,png,bmp,gif',

 'fileMime'=>'image/jpeg,image/png,image/gif',//這個一定要加上，很重要我認為！

 ]])->check(['imgFile'=>$file]);

 //上傳圖片到本地伺服器

 $saveName=\think\facade\Filesystem::disk('public')->putFile('merchant',$file,'data');

 $this->result(1,'圖片上傳成功!',$saveName,'json');

 }catch(\Exception$e){

 //驗證失敗輸出錯誤資訊

 return$this->exceptionHandle($e,

 '圖片上傳失敗!'.$e->getMessage(),

 'json',

 '');

 }

 }

本文轉載自老劉部落格, 轉載請註明出處,謝謝!

http://laoliu.pro/php/15.html
————————————————
版權宣告：本文為CSDN博主「老劉pro」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/a33130317/article/details/106933622