input file upload js与后台 附加 Ajax上传文件
web
<body>
<%--<form id="form1" runat="server" method="post" enctype="multipart/form-data" > --%>
<div>
<input id="File1" type="file" name="File1"/>
<input type="submit" onclick="save()" />
</div>
<%-- </form> --%>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
function save()
{
$.ajax({
type: "post",
url: "WebForm1.aspx",
dataType: "json",
success: function (data) {
$("input#showTime").val(data[0].demoData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
</script>
cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
System.Web.HttpFileCollection files = Request.Files;
for (int fileCount = 0; fileCount < files.Count; fileCount++)
{
System.Web.HttpPostedFile postedfile = files[fileCount];
string fileName = System.IO.Path.GetFileName(postedfile.FileName);
if (!String.IsNullOrEmpty(fileName))
{
string fileExtension = System.IO.Path.GetExtension(fileName); //获取文件类型
//上传目录
string directory = Server.MapPath("/UpLoadFiles/");
//文件全路径
string path = directory + fileName;
//判断目录是否存在
if (!Directory.Exists(directory))
{
Directory.CreateDirectory(directory);
}
//文件存在就删除文件
if (File.Exists(path))
{
File.Delete(path);
}
//上传到服务器的路径
postedfile.SaveAs(path);
}
}
}
else
{
Response.Write("0");
}
}
Ajax 上传文件
web端
<form id="form1" name="form1">
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" />
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span>
<input type="text" id="txt" />
<input type="button" onclick="ajaxUpload()" value="Upload" />
</form>
$(document).ready(function () {
$('#form1').submit(function () {
alert($("#txt").val());
var formdata = new FormData();
var fileObj = document.getElementById("fileToUpload").files;
for (var i = 0; i < fileObj.length; i++)
formdata.append("file" + i, fileObj[i]);
$.ajax({
type: 'POST',
url: 'WebForm1.aspx?id=1234',
data: formdata,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false
}).then(function () {
alert('done');
}, function () {
//failCal
});
return false;
});
});
function ajaxUpload() {
$("#form1").submit();
}
cs端
if (!IsPostBack)
{
string id ="";
if (Request["id"] != null)
id = Request["id"].ToString();
System.Web.HttpFileCollection files = Request.Files;
for (int fileCount = 0; fileCount < files.Count; fileCount++)
{
System.Web.HttpPostedFile postedfile = files[fileCount];
string fileName = System.IO.Path.GetFileName(postedfile.FileName);
if (!String.IsNullOrEmpty(fileName))
{
string fileExtension = System.IO.Path.GetExtension(fileName); //获取文件类型
//上传目录
string directory = Server.MapPath("/UpLoadFiles/");
//文件全路径
string path = directory + fileName;
//判断目录是否存在
if (!Directory.Exists(directory))
{
Directory.CreateDirectory(directory);
}
//文件存在就删除文件
if (File.Exists(path))
{
File.Delete(path);
}
//上传到服务器的路径
postedfile.SaveAs(path);
}
}
}
else
{
Response.Write("0");
}
浙公网安备 33010602011771号