<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryUploadDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Uploadify</title>
</head>
<body>
<input type="button" id="btnUpload" value="资源上传" />
<div id="saveDialog" style="display: none; position: absolute; z-index: 1003; border: solid 1px #AABCCF; left: 200px; top: 100px; background-color: white;">
<div id="divMove" style="background-color: #AAAAAA; 100%; height: 50px; cursor: move"></div>
<div id="fileQueue">
</div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
<div id="imgList"></div>
</div>
</body>
</html>
<link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" />
<link href="JS/jquery.uploadify-v2.1.0/example/css/uploadify.css" rel="stylesheet" />
<link href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="JS/jquery-1.7.1.js"></script>
<script src="JS/jquery-ui-1.8.20.js"></script>
<script src="JS/jquery-ui-1.8.20.min.js"></script>
<script src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>
<script src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.js"></script>
<style>
.ui-widget-overlay_ {
background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA;
opacity: 0.3;
z-index: 1001;
filter: Alpha(Opacity=30); /*{opacityOverlay}*/
}
.ui-widget-overlay_ {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
<%--遮盖层--%>
<div id="divZ" class="ui-widget-overlay_" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true,
'onComplete': function (event, ID, fileObj, response, data) {
var json_data = eval("(" + response + ")");
var imgStr = "<img src='" + fileObj.filePath + "' width=100 height=100/>";
$("#imgList").append(imgStr);
$("#imgBag").attr("src", fileObj.filePath);
$("#Portrait").attr("value", json_data.data.url);
}
});
});
</script>
<%--弹出层JS--%>
<script type="text/javascript">
$(function () {
$("#btnUpload").click(function () {
$("#saveDialog").show();
$("#divZ").show();
});
});
</script>
<%--拖动JS--%>
<script type="text/javascript">
var pic, mx, my;
var tok = document.getElementById("divMove");
tok.onmousedown = function (e) {
pic = document.getElementById("saveDialog");
pic.dx = mx - pic.offsetLeft;
pic.dy = my - pic.offsetTop;
return false;
};
tok.onmouseup = function ()
{ pic = null };
tok.ondragstart = function () {
return false;
};
document.onmousemove = function (e) {
var e = e || event;
var bd = document.body;
mx = e.pageX || e.clientX + bd.scrollLeft - bd.clientLeft;
my = e.pageY || e.clientY + bd.scrollTop - bd.clientTop;
if (pic) with (pic.style) {
left = mx - pic.dx + "px";
top = my - pic.dy + "px";
};
};
</script>
源码下载