今天临时安排去做微信页面,其中有一个后台,需要进行多张图片上传,于是使用uploadify插件,
使用前引用相关文件
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="Js/jquery.uploadify-v2.1.4/uploadify.css" type="text/css" />
<script type="text/javascript" src="Js/jquery.uploadify-v2.1.4/swfobject.js"></script>
<script src="Js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>
进行uploadify配置
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader': 'Js/jquery.uploadify-v2.1.4/uploadify.swf',
'script': 'UploadHandler.ashx',
'buttonText': 'SELECT FILES',
'cancelImg': 'Js/jquery.uploadify-v2.1.4/cancel.png',
'folder': strDir,
'auto': false,
'multi': true,
'sizeLimit': '4096000',
'onSelect': function(e, queueId, fileObj) {
if (fileObj.size / 1024 > 4096) {
alert("你所选择的文件超过限制!");
}
}
});
});
调用
<a href="javascript:checkTel();"> 上传图片</a>
其中checkTel函数为:
function checkTel() {
var tel = $('#txtTel').val();
if (tel == "") { alert('请填写电话!'); return; }
$('#uploadify').uploadifySettings('scriptData',
{ 'tel': document.getElementById('txtTel').value });
jQuery('#uploadify').uploadifyUpload()
}
其中需要在后台进行参数接收
string tel = context.Request.Params["tel"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])
完成效果: