前端使用ajax向后台传递文件及变量
<input type="file" id="file" onchange="UploadFunction()" />
<input type="button" value="上传" id="upload" />
</div>
<div id="fileinfo">
<ul id="file_sd"></ul>
</div>
<div id="jindutiao">
<label for="myProgress">进度条</label>
<progress id="myProgress" value="0" max="100"></progress>
<span id="mySpan"></span>
</div>
</div>
js
$(function () {
$("#jindutiao").hide();
$("#upload").click(function () {
$("#jindutiao").show();
//进度条
var myProgress = document.getElementById("myProgress");
var mySpan = document.getElementById("mySpan");
var value = myProgress.value;
mySpan.innerText = value + "%";
var ID = setInterval(function () {
value = myProgress.value;
if (value < 80) {
value += 10;
myProgress.value = value;
mySpan.innerText = value + "%";
if (value == 80) {
clearInterval(ID);
}
}
}, 20);
debugger
var needer = $("#needer").val();
var jobnumber = $("#jobnumber").val();
var needtime = $("#needtime").val();
var needsubject = $("#needsubject").val();
var needtext = $("#needtext").val();
//上传
var formdata = new FormData();
formdata.append("file", $('#file')[0].files[0]);
formdata.append("needer", needer);
formdata.append("jobnumber", jobnumber);
//formdata.append("needtime", needtime);
formdata.append("needsubject", needsubject);
formdata.append("needtext", needtext);
------ajax 中添加
contentType: false, // 不设置内容类型
processData: false, // 不处理数据
两个属性
$.ajax({
type: "POST",
url: "FileUP",
data: formdata ,
contentType: false, // 不设置内容类型
processData: false, // 不处理数据
dataType: "json",
success: function (res) {
if (res.ISSuccess) {
var AS = setInterval(function () {
value += 10;
myProgress.value = value;
mySpan.innerHTML = value + "%";
if (value == 100) {
clearInterval(AS);
alert("上传成功!");
}
}, 20)
alert("上传成功!");
//刷新页面
window.location.reload();
}
},
error: function (data) {
// 请求失败后要执行的代码
alert("上传失败!")
}
});
})
})
function UploadFunction() {
var size = $("#file")[0].files[0].size;
size = (size / (1024 * 1024)).toFixed(2);
var filename = $("#file")[0].files[0].name;
var type = $("#file")[0].files[0].type;
var LastTime = $("#file")[0].files[0].lastModifiedDate;
var fileinfo = "";
fileinfo = "<li>" + filename + "<span style='width: 50px;'></span> " + size + "M " + "</li>";
$("#file_sd").append(fileinfo);
//alert(type + LastTime);
}
后台
bool ISSuccess = true;
string [] FormKey = Request.Form.AllKeys;
string [] needer = Request.Form.GetValues(FormKey[0]);
string [] jobnumber = Request.Form.GetValues(FormKey[1]);
string [] needsubject = Request.Form.GetValues(FormKey[2]);
string [] needtext = Request.Form.GetValues(FormKey[3]);
foreach (string upload in Request.Files.AllKeys)
{
var file = Request.Files[upload];
string fileExt = "";
string name = file.FileName;
fileExt = name.Split('.')[1];
try
{
Random random = new Random();
//保存文件的虚拟路径
string path = "UploadFile";
//获取选择的文件名
string fileName = file.FileName;
//获取文件扩展名称
fileExt = Path.GetExtension(fileName);
string[] sArray = fileName.Split(new string[] { fileExt }, StringSplitOptions.RemoveEmptyEntries);
//生成新文件名
string NewName;
NewName = needsubject[0]+"" + needer[0];
NewName += sArray[0] + DateTime.Now.ToString("yyyyMMddHHmmssfff");
//获取指定虚机路径的物理路径
string fullPath = Server.MapPath("../"+path);
//上传文件保存路径
string savePath = fullPath+ "\\"+ NewName + fileExt;
//DBHelpter.MsgBox(savePath);
//保存文件到服务器
file.SaveAs(savePath);
}
catch (Exception ex )
{
ISSuccess = false;
}
}
return Json(new { ISSuccess = ISSuccess });