jQuery+ajax简单实现文件上传的方法

编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下

本文实例讲述了jQuery+ajax简单实现文件上传的方法。分享给大家供大家参考,具体如下:

可以通过ajax来提交表单,而不会刷新页面。主要使用的方法是 $("#formID").ajaxSubmit()方法

1、要引入js插件

需要下载的附件:jquery.form.js

2、页面代码:

<script src="project/js/jquery.form.js" type="text/javascript"></script>
<script src="project/js/fileload.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
createHtml($("#str"));
})
</script>
<tr>
<td>图片</td>
<td>
<div id="str">
</div>
<p style="display: none;" id="timgUrl"></p>
<p style="color: red" id="timgok"></p>
<img id="backImgUrl" src="@Model.ImageUrl" style="width:300px; height:200px;" /></td>
</tr>
<script src="~/project/js/jquery.form.js" type="text/javascript"></script>
<script src="~/project/js/fileload.js" type="text/javascript"></script>

fileload.js:

function fileloadon() {
$("#msg").html("");
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "/201410CarVideoAdmin/Home/UploadHelper",
success: function (data1) {
$('#timgUrl').html(data1);
var reg = new RegExp('"', "g");
var imageUrl = $('#timgUrl').text().replace(reg, "");
$('#backImgUrl').attr("src", imageUrl);
if ($('#timgUrl').html() != null) {
$('#timgok').html("文件上传成功");
} else {
$('#timgok').html("文件上传失败");
}
},
error: function (msg) {
alert("文件上传失败");
}
});
return false;
});
$("#_fileForm").submit();
}

Controller Code:

[HttpPost]
public ActionResult UploadHelper()
{
//开始上传
string imageUrl = string.Empty;
QF.WebGamePlatform.Reference.FileUploadService service = new QF.WebGamePlatform.Reference.FileUploadService();
var fileResult = service.PicUpLoad(Request.Files[0]);
if (fileResult.Code == 0)
{
imageUrl = fileResult.Data.RawImageUrl;
}
return Json(imageUrl, JsonRequestBehavior.AllowGet);
}

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板