Q.Uploader.js上传图片是真的方便,不用不知道,谁用谁喜欢!
使用Q.Uploader.js上传图片的同时如何传参呢?让我们一睹为快吧!
需引入的js
<link href="~js/WebUpLoad/demo.css" rel="stylesheet" type="text/css" />
<link href="~js/WebUpLoad/uploader.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~js/WebUpLoad/Q.js"></script>
<script type="text/javascript" src="~js/WebUpLoad/Q.Uploader.js"></script>
<script type="text/javascript" src="~js/WebUpLoad/Q.Uploader.UI.Image.js"></script>
<script type="text/javascript" src="~js/WebUpLoad/Q.Uploader.UI.File.js"></script>
html
<div class="jtable-input-label">
上传图片<span style="color:Red;">(图片格式为*.jpg;*.bmp;*.png;*.gif;建议尺寸1920*520;不能超过10M)</span>
</div>
<div class="ImgUpload">
<a id="upload-target" class="x-button"></a>
<span id="status"></span><input type="hidden" id="Banner" name="Banner" value="" />
</div>
<div id="myimage" style="text-align:left;"></div>
调用js
$(document).ready(function () {
PhotoUpload();//页面加载时需要初始化
})
$(document).on('click', '.remove', function (event) {
$(this).prev('img').remove();
$(this).parent('div').prev('div').show();
$(this).parent('div').prev('div').children('input[type=hidden]').val('');
$(this).remove();
})
function PhotoUpload() {
var WebSite = "http://123.cn";
var Uploader = Q.Uploader;
var data = "";
var uploader = new Uploader({
url: "#{uploadLink}".toAjax(),
//data: { cusfolder: $("#SiteUrl").val() },
target: document.getElementById("upload-target"),
view: document.getElementById("myimage"),
multiple: false, //选择文件时是否允许多选
//将auto配置为false以手动上传
auto: true,
allows: ".jpg,.gif,.png,.bpm",
on: {
//添加之前触发
add: function (task) {
if ($("#SiteUrl").val() == "") {
alert("页面地址不能为空!");
$("#SiteUrl").focus();
return false;
};
if (task.disabled) return alert("允许上传的文件格式为:" + this.ops.allows);
this.data = { cusfolder: $("#SiteUrl").val() };//关键代码,传参
},
remove: function (task) {
$('.ImgUpload').find("input[type=hidden]").val("");
},
complete: function (task) {
if (task.state != Uploader.COMPLETE)
return log(task.name + ": " + Uploader.getStatusText(task.state) + "!");
var json = task.json;
if (!json)
return log(task.name + ": 服务器未返回正确的数据!<br />");
var obj = eval('(' + task.response + ')');
$('.ImgUpload').find("input[type=hidden]").val(WebSite + obj.Url);
$("#myimage").html("<img id=\"preImg\" src=\"" + WebSite + obj.Url + "\" border=\"0\" height=\"80\" width=\"120\" ></img><a href=\"#\" title=\"删除\" class=\"remove\">X</a>");
$(".ImgUpload").hide();
}
}
});
uploader.start();
}
由于页面加载时进行初始化,所以data不能写在url后,否则data的值为空,所以在add添加之前触发处获取该值 this.data = { cusfolder: $("#SiteUrl").val() };