首頁  >  文章  >  web前端  >  jQuery+ajax實作檔案上傳(附程式碼)

jQuery+ajax實作檔案上傳(附程式碼)

php中世界最好的语言
php中世界最好的语言原創
2018-04-26 11:07:341754瀏覽

這次帶給大家jQuery ajax實作檔案上傳(附程式碼),jQuery 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>
<p id="str">
</p>
<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);
}

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

取得iframe中document物件步驟詳解

jQuery取得iframe元素

#

以上是jQuery+ajax實作檔案上傳(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn