服装logo创意设计/网址seo关键词
最近写了一个小项目需要上传文件显示进度条到ftp，总结一下分享
我用的是jQuery.form.js上传
ftp服务器，自己百度去搭建很简单的
Talk is cheap.Show me your code.
aspx页面
.hidden{display:none;}
.upload-fileWrap {
margin: 3px 0 0 -2px;
position: relative;
}
.upload-input-file {
position: absolute;
left: 2px;
top: 0;
display: inline-block;
width: 88px;
height: 34px;
line-height: 34px;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.upload-file-result {
color: #a1acc6;
font-size: 14px;
}
/*进度条*/
.progressWrap {
position: absolute;
right: 20px;
top: 56px;
width: 200px;
height: 10px;
}
.progress {
width: 100%;
height: 20px;
background: #0f1529;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
}
.progress-bar {
height: 20px;
background: url("blue.jpg") repeat-x;
}
.progress-bar span {
position: absolute;
color: #58637e;
font-size: 12px;
line-height: 18px;
}
.progress-bar span.progress-bar-status {
left: 50%;
top: -23px;
margin-left: -15px;
color: #1cc3b0;
}
.upload-file-stateWrap {
position: relative;
width: 100%;
height: auto;
}
.upload-file-stateWrap .progress {
width: 60%;
}
.upload-file-stateWrap span.progress-bar-status {
top: inherit;
bottom: -3px;
left: 60%;
margin-left: 5px;
}
function addfile() {
var progress = $(".progress-bar"),
status = $(".progress-bar-status"),
percentVal = '0%';
//上传步骤
var addvediofile = "";
var filePath =$('#upload-input-file').val();
var startIndex = filePath.lastIndexOf(".");
if (startIndex != -1)
addvediofile = filePath.substring(startIndex + 1, filePath.length).toLowerCase();
else
type = "";
if (addvediofile != "mp4" && addvediofile != "rmvb" && addvediofile != "avi" && addvediofile != "ts") {
alert("文件格式不对");
$('#upload-input-file').val("");//介绍视频
return;
}
var size = 0;
size = $("#upload-input-file")[0].files[0].size; //byte
size = size / 1024;//kb
size = (size / 1024).toFixed(3);//mb
if (size > 100) {
alert("文件超过100M,无法上传");
return;
}
$("#myupload").ajaxSubmit({
url: './ashx/Handler.ashx',
type: "post",
beforeSend: function () {
$(".progress").removeClass("hidden");
progress.width(percentVal);
status.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
percentVal = percentComplete + '%';
progress.width(percentVal);
status.html(percentVal);
console.log(percentVal, position, total);
},
success: function (result) {
//alert(result);
percentVal = '100%';
progress.width(percentVal);
status.html(percentVal);
获取上传文件信息
alert("上传成功");
//uploadFileResult.push(result);
console.log(uploadFileResult);
$(".upload-file-result").html(result);
$("#upload-input-file").val('');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(errorThrown);
$(".upload-file-result").empty();
}
});
}
一般处理程序文件
1
2
3 usingSystem;4 usingSystem.Web;5 usingSystem.Collections.Generic;6 usingSystem.IO;7 usingSystem.Linq;8 usingSystem.Net;9 usingSystem.Web;10 public classHandler : IHttpHandler {11
12 public voidProcessRequest (HttpContext context) {13 context.Response.ContentType = "text/plain";14
15 string ftpUserID ="kfz";16 string ftpServerIP = "192.168.0.102";17 string ftpPassword ="kfz123456";18 string ftpRemotePath ="test";19
20 string ftpURI = "ftp://" + ftpServerIP + "/" + ftpRemotePath + "/";21 HttpFileCollection files =context.Request.Files;22
23 if (files.Count > 0)24 {25 HttpPostedFile fileInf = files[0];26 FtpWebRequest reqFTP;27 reqFTP = (FtpWebRequest)FtpWebRequest.Create(new Uri(ftpURI +fileInf.FileName));28 reqFTP.Credentials = newNetworkCredential(ftpUserID, ftpPassword);29 reqFTP.Method =WebRequestMethods.Ftp.UploadFile;30 reqFTP.KeepAlive = false;31 reqFTP.UseBinary = true;32 reqFTP.ContentLength =fileInf.ContentLength;33 int buffLength = 2048;34 byte[] buff = new byte[buffLength];35 intcontentLen;36 Stream fs =fileInf.InputStream;37 try
38 {39 Stream strm =reqFTP.GetRequestStream();40 contentLen = fs.Read(buff, 0, buffLength);41 while (contentLen != 0)42 {43 strm.Write(buff, 0, contentLen);44 contentLen = fs.Read(buff, 0, buffLength);45 }46 strm.Close();47 fs.Close();48 context.Response.Write(fileInf.FileName);49 }50 catch(Exception ex)51 {52 throw newException(ex.Message);53 }54 }55
56
57 }58
59 public boolIsReusable {60 get{61 return false;62 }63 }64
65 }
说一下我遇到的一些问题，首先我遇到了一开始怎么都触发不了异步，无法进入一般处理程序，但是通过前端调试，可以看到触发了uploadProgress回调函数，最后发现是文件太大了，需要配置webconfig,可以根据自己的需求来配置
如果你发布到iis中运行，也需要去iis管理器去配置编辑器中设置，默认只能上传30M,这个怎么配置，我也是百度的，自己可以尝试一下。