Uploadify自定义顺序上传图片并修改名字
解决Uploadify上传图片之后自己没法按照需求把图片排序的问题。
分析：uploadify这个控件是按照选择的文件顺序进行上传的 上传的时候我们又要改变的顺序 我们可以创建两个集合来处理 一个上传的集合arrayDiv 一个是操作的集合arraytable 每次处理之后动态改变查询
1：html界面部分 用一个table作为表格来存放选择的文件名称
View Code
<body>
<div id="fileQueue">
</div>
<table id="tablecontent">
<tr>
<td>
编号
</td>
<td>
文件名字
</td>
<td>
操作
</td>
<td>
移动
</td>
</tr>
</table>
<input type="file" name="uploadify" id="uploadify" />
<p>
<input id="Button2" type="button" value="上传" onclick="upload()" />
</p>
</body>
2：控件正确使用需要引用js(Uploadify的下载就不说了,很多地方可以找到)
View Code
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<link href="Scripts/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="Scripts/uploadify/jquery.uploadify.v2.1.4.js" type="text/javascript"></script>
<script src="Scripts/uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
<script src="Scripts/uploadify/swfobject.js" type="text/javascript"></script>
3:让Uploadify生效，每次选择图片往table中添加数据
View Code
$(function () {
$("#uploadify").uploadify({
'uploader': 'Scripts/uploadify/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'Scripts/uploadify/cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'fileExt': '*.jpg;*.jpeg;*.png;*.gif',
'fileDesc': '图片(jpg,jpeg,png,gif)',
'auto': false,
'multi': true,
'scriptData': { NewfileName: 0 },
'onSelect': function (e, queueId, fileObj) {
var trhtml = "<tr id=" + queueId + "><td>" + queueId + "</td><td>"
+ fileObj.name + "</td><td><a href='javascript:removetr(\"" + queueId + "\")'>删除</a></td><td><a href='javascript:void(0)' onClick=" + 'moveUp(this)' + ">上移</a><a href='javascript:void(0)' onClick=" + 'moveDown(this)' + ">下移</a></td></tr>";
$("#tablecontent").append(trhtml);
},
'onComplete': function (e, queueId, fileObj, response, data) {
if (data.fileCount > 0) {
m++;
var tempDiv = arrayDiv[m];
for (var s = 0; s < arrayTable.length; s++) {
if (arrayTable[s] == tempDiv) {
$('#uploadify').uploadifySettings('scriptData', { 'NewfileName': s });
}
}
}
}
});
});
4：表格操作事件(上移 下移 删除事件)
View Code
//删除图片
function removetr(id) {
$("#uploadify").uploadifyCancel(id);
$("tr[id='" + id + "']").remove();
}
//上移
function moveUp(obj) {
var current = $(obj).parent().parent();
var prev = current.prev();
if (current.index() > 1) {
current.insertBefore(prev);
}
}
//下移
function moveDown(obj) {
var current = $(obj).parent().parent();
var next = current.next();
if (next) {
current.insertAfter(next);
}
}
5：提交事件
View Code
//全局的变量
var m = 0;
var arrayTable = new Array(); //操作table的集合 操作列表
var arrayDiv = new Array(); //实现div的集合 要上传列表
//上传的事件
function upload() {
for (var i = 1; i < $("#tablecontent tr").length; i++) { //获取table的行数 给数组赋值
arrayTable.push($("#tablecontent tr:eq(" + i + ")").find("td:eq(0)").text());
}
for (var k = 0; k < $("#fileQueue").children().length; k++) {//给div集合赋值
var temp = $("#fileQueue").children().eq(k).attr("id");
arrayDiv.push(temp.substring(temp.length-6, temp.length));
}
var tempDiv = arrayDiv[m];
//第一个值在table中集合的位置
for (var s = 0; s < arrayTable.length; s++) {
if (arrayTable[s] == tempDiv) {
$('#uploadify').uploadifySettings('scriptData', { 'NewfileName': s });
}
}
$('#uploadify').uploadifyUpload();
}
6：一般处理程序的后台
View Code
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["Filedata"]; //获取上传的单个文件
string pictureId = context.Request["NewfileName"]; //上传文件将要重新命名的一部分
string uploadPath = HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\";//上传文件将要存放的路径
if (file != null)
{
if (!Directory.Exists(uploadPath))
{ //判断该文件夹是否存在 没有就创建
Directory.CreateDirectory(uploadPath);
}
string fileName = file.FileName;//获取上传文件的名称
string fileExtension = Path.GetExtension(fileName);//获取文件的扩展名
string fileNewName = "temp_" + pictureId;
file.SaveAs(uploadPath + fileNewName + fileExtension);
context.Response.Write("1");
}
else {
context.Response.Write("0");
}
7：很丑的效果图
