jQuery File Upload 檔案上傳套件 應用在laravel 紀錄

說明: https://blueimp.github.io/jQuery-File-Upload/

在Laravel框架下，因為MVC分開原因，需要做以下設定。

1.View: 引入Js,跟html語法。

  	

  	    
jQuery File Upload Demo
  	    
Basic Plus UI version
  	    

  	        
Basic
  	        
Basic Plus
  	        
Basic Plus UI
  	        
AngularJS
  	        
jQuery UI
  	    
  	    

  	    

  	        
File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.

  	        Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

  	        Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
  	    
  	    

  	    
  	    

  	        
  	        
  	        
  	        

  	            

  	                
  	                
  	                    
  	                    Add files...
  	                    
  	                
  	                
  	                
  	                
  	                
  	                
  	                
  	            
  	            
  	            

  	                
  	                

  	                    

  	                
  	                
  	                
 
  	            
  	        
  	        
  	        
  	    
  	    

  	    

  	        

  	            
Demo Notes
  	        
  	        

  	            

  	                
The maximum file size for uploads in this demo is 999 KB (default file size is unlimited).
  	                
Only image files (JPG, GIF, PNG) are allowed in this demo (by default there is no file type restriction).
  	                
Uploaded files will be deleted automatically after 5 minutes or less (demo files are stored in memory).
  	                
You can drag & drop files from your desktop on this webpage (see Browser support).
  	                
Please refer to the project website and documentation for more information.
  	                
Built with the Bootstrap CSS framework and Icons from Glyphicons.
  	            
  	        
  	    
  	
  	
  	

  	    

  	    

  	    ‹
  	    ›
  	    ×
  	    
  	    

  	



  	
  	
  	
  
  
  
  
  
  
  
  
  


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

2.在route需要設定any方式  (讓post,get,delete.都可以通過)

Route::any('/file','HomeController@file');

3.需要加載PHP UploadHandler class，在Laravel裡面可以用composer加載
EX:放在white/tool工具資料夾，將UploadHandler檔案加入namespace，用composer dump-autoload 更新加載。
UploadHandler檔案需要做以下調整:

namespace white\tool;

class UploadHandler

{

  //public function __construct 裡面的script_url調整位置

  'script_url' => 'https://myurl/laravel55/shop55/public/file',

}

4.在加載的js裡面有一個檔案,main.js需要調整 Url設定，用來指向route設定的方法

    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url:'https://myurl/laravel55/shop55/public/file'
    });

5.調整php.ini設定

extension=php_gd2.dll

6.錯誤說明:
-如果跳出$等jquery錯誤，可能是沒有先加入jquery的function
-刪除檔案跳出405 not method allow，可能是route沒有設定正確 (any方法,確定route對)，或參考3.4路徑確定正確
-上傳跳出Filed to resize image，需要調整5 php.ini設定
-記得檔案資料夾權限要設定允許寫入跟讀取