web前端上传插件，带参数上传
2018-03-24 本文已影响0人
哥本哈登_sketch
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
<style>
html{
background: none;
}
body {
font-family: "microsoft yahei";
color: #111a17;
overflow: hidden;
}
.reg_div {
background-color: #FFFFFF;
position: relative;
padding: 0;
border: 0;
overflow: hidden;
}
.reg_div_line {
clear: left;
overflow: hidden;
border-top: 1px solid #dededd;
}
.reg_div_line label {
line-height: 1.2;
float: left;
width: 30%;
padding: 11px 15px;
}
.reg_div_line input {
float: right;
width: 70%;
margin-bottom: 0;
padding-left: 0;
border: 0;
}
.btn {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-color: #009F95;
color: #FFFFFF;
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
width: 40%;
transition: background-color 0.2s linear 0s;
border: none;
cursor: pointer;
margin: 0 0 30px;
}
.demo {
width: 100%;
text-align: center;
margin: 10 auto;
margin-top: 10px;
;
}
.btn:hover {
background-color: #e95a00;
text-decoration: none
}
.ul_pics li {
float: left;
width: 160px;
height: 20px;
border: 1px solid #ddd;
padding: 2px;
border: none;
text-align: center;
margin: 0 5px 5px 0;
}
/* .ul_pics li .img {
width: 160px;
height: 140px;
display: table-cell;
vertical-align: middle;
}
.ul_pics li img {
max-width: 160px;
max-height: 140px;
vertical-align: middle;
}*/
.progress {
position: relative;
padding: 1px;
border-radius: 3px;
margin: 60px 0 0 0;
}
.bar {
background-color: #E95A00;
display: block;
width: 0%;
height: 20px;
border-radius: 3px;
margin-left: 65%;
padding-top: 5px;
margin-top: 15px;;
}
.percent {
position: absolute;
height: 20px;
display: inline-block;
top: 3px;
left: 2%;
color: #fff;
margin-top: 15px;;
}
</style>
</head>
<body>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/sucaihuo.js"></script>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/sucaihuo.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav" style="background-color: #FFFFFF;">
<a class=" mui-icon mui-icon-left-nav mui-pull-left mui-action-back" style="color: #111a17;"></a>
<h1 class="mui-title" style="color: #111a17;">商家加盟</h1>
</header>
<br /><br /><br />
<div class="reg_div">
<div class="reg_div_line">
<label>手机号</label>
<input type="tel" placeholder="输入手机号码" id="tel" name="tel" style="width: 40%;float: left;" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" />
</div>
<div class="reg_div_line" style="border: none;">
<label>密码</label>
<input type="password" id="pwd" name="pwd" placeholder="请输入6位以上的密码" />
</div>
<div class="">
<div class="demo">
<ul id="ul_pics" class="ul_pics clearfix"></ul>
<a class="btn" id="btn">选择停车场封面图片</a>
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript">
var tel;
var pwd;
var uploader = new plupload.Uploader({ //创建实例的构造方法
runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
browse_button: 'btn', // 上传按钮
url: "http://121.42.167.36/Addons/UploadPic/ajaxUpload.php", //远程上传地址
flash_swf_url: 'plupload/Moxie.swf', //flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址
filters: {
max_file_size: '5mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允许文件上传类型
{
title: "files",
extensions: "jpg,png,gif"
}
]
},
multi_selection: true, //true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
if($("#ul_pics").children("li").length > 30) {
alert("您上传的图片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files, function(file) { //遍历文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上传中，显示进度条
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
BeforeUpload: function(up, file) {
tel = $("#tel").val();
pwd = $("#pwd").val();
//重点在这里，上传的时候自定义参数信息
uploader.setOption("multipart_params", {
"tel": tel,
"pwd": pwd,
});
},
FileUploaded: function(up, file, info) { //文件上传成功的时候触发
//console.log(JSON.stringify(up) + "file:" + JSON.stringify(file) + "info:" + JSON.stringify(info));
var jsonInfo = JSON.parse(info.response); //将json字符串转对象使用
if(jsonInfo.status == '1') {
mui.openWindow({
url: "shop_rig_info.html",
extras: {
tel: tel,
},
createNew: true,
});
} else {
//console.log(jsonInfo.error);
mui.toast(jsonInfo.error);
}
/*var data = JSON.parse(info.response);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");*/
},
Error: function(up, err) { //上传出错的时候触发
alert(err.message);
}
}
});
uploader.init();
</script>
</html>
