jQuery-file-Upload使用介紹
阿新 • • 發佈：2019-01-28
前言
開發過程中有時候需要使用者在前段上傳圖片資訊，我們通常可以使用form標籤設定enctype=”multipart/form-data” 屬性上傳圖片，當我們點選submit按鈕的時候，圖片資訊就會自動的儲存在預定義變數$_FILES中，我們在後臺就可以通過這個預定義變數得到前臺上傳的圖片資訊，除了這種方法還有很多外掛可以實現上傳圖片功能的。jQuery-file-Upload就是其中一種。
jQuery-file-Upload介紹
jQuery File Upload 是一個Jquery圖片上傳元件，支援多檔案上傳、取消、刪除，上傳前縮圖預覽、列表顯示圖片大小，支援上傳進度條顯示；支援各種動態語言開發的伺服器端。
下載外掛
使用步驟
外掛下載完成後，我們可以可以在專案中進行引用，使用外掛提供的功能。
這個功能實現起來非常簡單
引入js檔案
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
編寫html程式碼
編寫input標籤，可以進行圖片選擇
<input id="fileupload" type="file" name="file">編寫一個div顯示進度條，初始長度為0%
<div class="bar" style="width: 0%;"></div>編寫一個img標籤顯示上傳之後的圖片
<img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/>
編寫JS程式碼，也就是實現上傳功能。
<script> $('#fileupload').fileupload({ dataType: 'json', url: "{:U('setFile')}",//檔案的後臺接受地址 //設定進度條 progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100); $('#progress .bar').css( 'width', progress + '%' ); }, //上傳完成之後的操作，顯示在img裡面 done: function (e, data){ $("#uploadimg").attr({src: data.result.pic_url}); $("#uploadimg").css({width: "400px", height: "400px"}); } }); </script>
這個案例使用的是PHP的ThinkPHP框架進行搭建的。所以url地址這樣寫，如果你不想把url地址寫在js裡面，也可以寫在input標籤上
<input id="fileupload" type="file" name="file" data-url="{:U('setFile')}">
這樣當我們選擇完圖片後就會自動上傳圖片到後臺，在後臺就可以對上傳的圖片進行儲存處理，並把處理後的圖片連結返回。因為本案例使用的是TP框架，因此就可以使用到TP框架的Upload類進行操作。
後臺PHP程式碼
<?php
namespace File\Controller;
use Think\Controller;
use Think\Upload;
class FileController extends Controller{
public function index(){
$this -> display();
}
public function setFile(){
if($_FILES['file']['error']){
$data['data'] = 0;
}else{
$pic_url = $this -> uploadPic('test');
$data['pic_url'] = $pic_url;
}
$this -> ajaxReturn($data);
}
/**
* @param $file 儲存的檔名
* @return string
*/
private function uploadPic($file){
$upload = new Upload();
$upload -> maxSize = 10145728;
$upload -> exts = array('jpg','png','jpeg');
$upload -> rootPath = './Uploads/';
$upload -> savePath = $file . '/';
$upload -> saveName = 'time';
$info = $upload -> upload();
if(!$info){
$this -> error($upload -> getError());
}else{
$xw_img = '/Uploads/' . $info['file']['savepath'] . $info['file']['savename'];
return $xw_img;
}
}
}
前段程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<style>
.bar {
height: 18px;
background: green;
}
.content{
width: 100%;text-align: center;margin-top: 70px;
}
#progress{
border-radius:6px;width: 300px;background: red;
margin: 10px auto;
}
</style>
<body>
<div class="content">
<input id="fileupload" type="file" name="file" data-url="{:U('setFile')}">
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/>
</div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="__PUBLIC__/jquery_fileupload/js/vendor/jquery.ui.widget.js"></script>
<script src="__PUBLIC__/jquery_fileupload/js/jquery.iframe-transport.js"></script>
<script src="__PUBLIC__/jquery_fileupload/js/jquery.fileupload.js"></script>
<script>
$('#fileupload').fileupload({
dataType: 'json',
//url: "{:U('setFile')}",//檔案的後臺接受地址
//設定進度條
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100);
$('#progress .bar').css(
'width',
progress + '%'
);
},
//上傳完成之後的操作，顯示在img裡面
done: function (e, data){
$("#uploadimg").attr({src: data.result.pic_url});
$("#uploadimg").css({width: "400px", height: "400px"});
}
});
</script>
</body>
</html>