前端:javascript
<!-- 引入CSS、JS --> <link rel="stylesheet" type="text/css" href="{{asset('org/uploadify/uploadify.css')}}"> <script type="text/javascript" src="{{asset('admin/js/jquery.js')}}"></script> <script src="{{asset('org/uploadify/jquery.uploadify.min.js')}}" type="text/javascript"></script> <!-- 上傳按鈕 --> <input id="file_upload" name="file_upload" type="file"><br> <img id="picshow" src=""> <!-- 默認隱藏 #picshow{display: none;} --> <!-- 實例化 --> <script> $('#file_upload').uploadify({ swf : "{{asset('org/uploadify/uploadify.swf')}}", // 引入Uploadify 的核心Flash文件 uploader : "{{url('admin/upload')}}", // PHP腳本地址 width: 120, // 上傳按鈕寬度 height: 30, // 上傳按鈕高度 buttonImage: "{{asset('org/uploadify/browse-btn.png')}}", // 上傳按鈕背景圖片地址 fileTypeDesc: 'Image File', // 選擇文件對話框中圖片類型提示文字(Windows系統) fileTypeExts: '*.jpg;*.jpeg;*.png;*.gif', // 選擇文件對話框中容許選擇的文件類型(Windows系統) formData : {'_token': '{{csrf_token()}}'}, // Laravel表單提交必需參數_token,防止CSRF onUploadSuccess : function(file, data, response) { // 上傳成功回調函數 $('#picshow').attr('src', data).show(); $('#file_upload).val(data); }, onUploadError: function(file, errorCode, errorMsg, errorString) { // 上傳失敗回調函數 $('#picshow').attr('src', '').hide(); $('#file_upload).val(''); alert('上傳失敗,請重試!'); } }); </script>
後端:php
/** * 圖片上傳 * @return [type] [description] */ public function upload() { $file = Input::file('Filedata'); // 不一樣環境可能獲取方式有點不一樣,能夠下打印觀察一下 dd(Input()); if($file->isValid()) { // 上傳目錄。 public目錄下 uploads/thumb 文件夾 $dir = 'uploads/thumb/'; // 文件名。格式:時間戳 + 6位隨機數 + 後綴名 $filename = time() . mt_rand(100000, 999999) . '.' . $file ->getClientOriginalExtension(); $file->move($dir, $filename); $path = $dir . $filename; return url($path); } } // $realPath = $file->getRealPath(); // 緩存在 tmp 文件夾的文件絕對路徑 // $tmpName = $file->getFileName(); // 緩存在 tmp 文件夾的文件名 // $clientName = $file->getClientOriginalName(); // 獲取原文件名稱 // $extension = $file->getClientOriginalExtension(); // 上傳文件的後綴
參考連接:簡書 - laravel圖片和文件的上傳css
uploadify 官網:http://www.uploadify.comhtml