jQuery+ajax簡(jiǎn)單實(shí)現(xiàn)文件上傳的方法
本文實(shí)例講述了jQuery+ajax簡(jiǎn)單實(shí)現(xiàn)文件上傳的方法。分享給大家供大家參考,具體如下:
可以通過(guò)ajax來(lái)提交表單,而不會(huì)刷新頁(yè)面。主要使用的方法是 $("#formID").ajaxSubmit()方法。
1、要引入js插件
需要下載的附件:jquery.form.js
2、頁(yè)面代碼:
<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()
{
//開(kāi)始上傳
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);
}
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery Ajax文件上傳(php)
- jquery ajax實(shí)現(xiàn)文件上傳功能實(shí)例代碼
- 基于HTML5 Ajax文件上傳進(jìn)度條如何實(shí)現(xiàn)(jquery版本)
- jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
- jQuery+ajax實(shí)現(xiàn)文件上傳功能
- jQuery插件AjaxFileUpload實(shí)現(xiàn)ajax文件上傳
- 基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析
- jquery實(shí)現(xiàn)異步文件上傳ajaxfileupload.js
- jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
相關(guān)文章
jquery分頁(yè)插件AmSetPager(自寫(xiě))
第一次做的插件,我這個(gè)插件好像使用有些另類,是調(diào)用數(shù)據(jù)展示容器的元素$(#DataContent).AmSetPager({...});在參數(shù)中配置分頁(yè)容器元素ID。寫(xiě)完插件后看別的插件都是調(diào)用分頁(yè)元素ID2013-04-04
詳解JavaScript異步編程中jQuery的promise對(duì)象的作用
這篇文章主要介紹了JavaScript異步編程中jQuery的promise對(duì)象的作用,同時(shí)也談到了js的Dojo框架中promise模式的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)的自定義輪播圖功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了輪播圖的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05
jQuery+jsp實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果(附源碼)
這篇文章主要介紹了jQuery+jsp實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果,以完整實(shí)例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫(kù)操作實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果的相關(guān)技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jquery Firefox3.5中操作select的問(wèn)題
不過(guò)最近安裝了FF3.5正式版,發(fā)現(xiàn)這種方法在它下面得不到值,就去看jquery的幫助文檔,在文檔中對(duì)select選中的引用是用如下方法2009-07-07
jquery二級(jí)導(dǎo)航內(nèi)容均分的原理及實(shí)現(xiàn)
頭部導(dǎo)航二級(jí)導(dǎo)航有些內(nèi)容太長(zhǎng),一列的話太過(guò)難看,就要分成兩列,要做到按塊盡量均分,排列順序沒(méi)有限制2013-08-08
jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget
這篇文章介紹了jQuery?UI旋轉(zhuǎn)器部件Spinner?Widget,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
jquery動(dòng)態(tài)加載js/css文件方法(自寫(xiě)小函數(shù))
jquery自帶的getSrcript文件只能動(dòng)態(tài)加載js代碼,但不能加載css,后來(lái)自己寫(xiě)了一個(gè)可加載js與css的程序2014-10-10

