jQuery-file-Upload使⽤介绍
前⾔
开发过程中有时候需要⽤户在前段上传图⽚信息，我们通常可以使⽤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
readprocessmemory读取数据不对jquery.iframe-transport.js
jquery.fileupload.js
编写html代码
编写input标签，可以进⾏图⽚选择
<input id="fileupload" type="file" name="file">
编写⼀个div显⽰进度条，初始长度为0%
<div class="bar" ></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 / al * 100);
$('#progress .bar').css(
'width',
progress + '%'
);
},
//上传完成之后的操作，显⽰在img⾥⾯
done: function (e, data){
$("#uploadimg").attr({src: sult.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>jquery下载文件请求
<head>
acm题库<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" ></div>
</div>
<img id="uploadimg" src="__PUBLIC__/images/bg.jpg" width="400px" height="408px"/> </div>
<script src="code.jquery/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 / al * 100);
$('#progress .bar').css(nginx反向代理怎么做
'width',
progress + '%'
);
},
//上传完成之后的操作，显⽰在img⾥⾯
done: function (e, data){
$("#uploadimg").attr({src: sult.pic_url});
$("#uploadimg").css({width: "400px", height: "400px"});
}
});
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。