Last sharing a file upload control (URL: http://www.cnblogs.com/ushou/archive/2013/01/17/2865332.html ), the function will be more, but the overall feel is not perfect, after nearly a few days of fermentation, brewing, and finally the production of friends, left ~ ~ ~
The upload controls add new elements, such as a list of attachments show, sort drag, batch updates.
As the saying goes, independence, Better Together, now share the key code.
First, the first in a new partial view in MVC.
<link href="@Url.Content("~/Content/Uploadify/uploadify.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Content/Uploadify/swfobject.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/Uploadify/jquery.uploadify.v2.1.4.min.js")"></script>
<script src="@Url.Content("~/Content/zDialog/zDialog.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/zDialog/zDrag.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#uploadify").uploadify({
'uploader': '/Content/Uploadify/uploadify.swf',
'script': '/Ashx/UploadHandler.ashx',
'cancelImg': '/Content/Uploadify/cancel.png',
'folder': '/UploadFile',
'queueID': 'fileQueue',
'multi': true,
'auto': true,
'fileExt': '*.jpg;*.gif;*.png',
'fileDesc': 'Image Files (.JPG, .GIF, .PNG)',
'queueID': 'custom-demo',
'queueSizeLimit': 9999,
'simUploadLimit': 9999,
'buttonText': '选择文件',
'removeCompleted': true,
'onSelectOnce': function (event, data) {
},
'onComplete': function (event, queueId, fileObj, response, data) {
AddFiles(response.split('|')[1], response.split('|')[2]);
},
'onAllComplete': function (event, data) {
}
});
});
</script>
Two: Create two ashx files, two is enough, had wanted to be compressed to one, then think about or forget.
Both ashx, respectively, with the following features.
1, the attachment of the database to add, delete, change,.
The key code is as follows:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string action = RequestExtension.GetQueryString<String>("action", "");
if (action == "")
return;
MethodInfo methodInfo = this.GetType().GetMethod(action);
if (methodInfo != null)
{
context.Response.Clear();
context.Response.Write(methodInfo.Invoke(this, null));
context.Response.End();
}
}
Here action is passed to the function name, and through reflection called.
Usage is quite simple:
The following example:
modify:
$.post("/Ashx/Attachment.ashx?action=Modify", { fileID: fileID, fileName: fileName, fileDesc: fileDesc }, function (txt) {
if (txt == "OK") {
diag.close();
}
else {
Dialog.alert(txt);
}
}, "text");
delete:
//发送请求到服务器删除文件
var fileID = $(obj).parent().parent().attr("id");
$.post("/Ashx/Attachment.ashx?action=DelFile", { fileID: fileID }, function (txt) {
if (txt == "OK") {
Dialog.close();
var p = $(obj).parent().parent();
p.css('display', 'none');
}
else {
Dialog.alert(txt);
}
}, "text");
Others such as new construction, acquisition usage is so no longer dwell.
Three: JS generating operating element, interact with the database.
Here is the new accessory, bulk modify, delete attachments critical code, in the middle there dragging a page element function.
function AddFilesUseTb(fileName, fileID, imgUrl) {
var cloneTb = $('#tbTemplete').clone().attr('id', fileID);
$('#uploadMsg').append(cloneTb.wrap('<div></div>').parent().html());
$("#" + fileID).find("input:eq(0)").val(fileName);
if (imgUrl != null) {
$("#" + fileID).find("img:eq(0)").attr("src", imgUrl);
}
//文件上传完成后启用sortable
$('.gbin1-list').sortable().bind('sortupdate', function () {
});
//文件上传完成后，自动更新序列号
var fileList = $('#uploadMsg').find("table");
var fileCount = $('#uploadMsg').find("table").length;
$.post("/Ashx/Attachment.ashx?action=Modify", { fileID: fileID, fileName: fileName, fileDesc: "", IsMove: "N", sequenceNum: fileCount }, function (txt) {
if (txt != "OK") {
Dialog.alert("保存名称为：" + fileName + "的文件时出错，请重试");
}
}, "text");
}
function EditAllFiles(obj) {
var fileList = $('#uploadMsg').find("table");
var fileCount = $('#uploadMsg').find("table").length;
for (var i = 0; i < fileCount; i++) {
var fileID = $(fileList[i]).parent().attr("id");
var fileName = $(fileList[i]).find("input:eq(0)").val();
var fileDesc = $(fileList[i]).find("textarea:eq(0)").val();
var IsMove = $(fileList[i]).find('input:checkbox:checked').val();
if (IsMove == "on") {
IsMove = "Y";
}
else {
IsMove = "N";
}
$.post("/Ashx/Attachment.ashx?action=Modify", { fileID: fileID, fileName: fileName, fileDesc: fileDesc, IsMove: IsMove, sequenceNum: i+1 }, function (txt) {
if (txt != "OK") {
Dialog.alert("保存名称为：" + fileName + "的文件时出错，请重试");
}
}, "text");
}
$(obj).val("已保存");
};
function DelAllFiles(obj) {
Dialog.confirm('警告：确定要删除附件？', function () {
var fileList = $('#uploadMsg').find("table").each(function () {
var fileID = $(this).parent().attr("id");
var fileName = $(this).find("input:eq(0)").val();
$.post("/Ashx/Attachment.ashx?action=DelFile", { fileID: fileID }, function (txt) {
if (txt != "OK") {
Dialog.alert("删除名称为：" + fileName + "的文件时出错，请重试");
}
}, "text");
});
});
}
function DelFiles(obj) {
Dialog.confirm('警告：确定要删除附件？', function () {
//发送请求到服务器删除文件
var tbSelect = $(obj).parent().parent().parent().parent().parent();
var fileID = tbSelect.attr("id");
$.post("/Ashx/Attachment.ashx?action=DelFile", { fileID: fileID }, function (txt) {
if (txt == "OK") {
Dialog.close();
tbSelect.css('display', 'none');
}
else {
Dialog.alert(txt);
}
}, "text");
});
}
Four: page references such as partial view, simply saying: @ Html.Action ( "Index", "File")
Saying that MVC really is cattle breaking, simple and more than a asp.net.
Five: to share the use of the code page of Dapper.
public KeyValuePair<Pagination, IList<AttachmentModel>> AttachmentPagination(Pagination pagin, AttachmentModel condition)
{
using (SqlConnection conn = DapperFactory.CrateOpenConnection())
{
String executeQuery = @"WITH pagintable AS(
SELECT ROW_NUMBER() OVER(ORDER BY CreateDate DESC )AS RowID, ID, FileID, TabName, TabID, FileName, FileDesc, FilePath, FileTypeID, FileSize, CreateDate, CreateMan, EditDate, EditMan, IsValid, NeedMoveToMoss, IsMoveToMoss, IsTemp,SequenceNum FROM Attachment
WHERE 1= 1)
SELECT * FROM pagintable where RowID between ((@CurrentPageIndex - 1) * @PageSize) + 1 and (@CurrentPageIndex * @PageSize)";
String executeCount = "SELECT COUNT(*) AS CountNum FROM Attachment WHERE 1= 1";
var mixCondition = new
{
CurrentPageIndex = pagin.CurrentPageIndex,
PageSize = pagin.PageSize
};
List<AttachmentModel> listScore = conn.Query<AttachmentModel>(executeQuery, mixCondition).ToList();
pagin.TotalItemCount = conn.Query<Int32>(executeCount, mixCondition).SingleOrDefault<Int32>();
KeyValuePair<Pagination, IList<AttachmentModel>> result =
new KeyValuePair<Pagination, IList<AttachmentModel>>(pagin, listScore);
return result;
}
}
This is done using CodeSmith automatically generated code, to get seconds seconds, and quite flexible and efficient.
Zhang map:
Note: The order of the two annexes of this picture can be dragged to change, huh, huh.
The old way, provide Demo URL for users to try and Grilled source.
URL: http://www.kxwg.net/File/FileUpload
Reproduced in: https: //www.cnblogs.com/ushou/archive/2013/01/25/2875883.html