jQuery + Ajax implementiert den Datei-Upload (mit Code)

Dieses Mal werde ich Ihnen die jQuery+Ajax-Implementierung des Datei-Uploads vorstellen (mit Code). Was sind die Vorsichtsmaßnahmen für die jQuery+Ajax-Implementierung des Datei-Uploads? Fälle. Einer steht auf und schaut nach.

Die hauptsächlich verwendete Methode ist die Methode $("#formID").ajaxSubmit().

1. Zur Einführung des js-Plugins

Anhänge, die heruntergeladen werden müssen: jquery.form.js

2 Code:

<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);
}

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte achten Sie auf andere verwandte Themen im Artikel über die chinesische PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Abrufen des Dokumentobjekts im Iframe

jQuery zum Abrufen des Iframe-Elements

Das obige ist der detaillierte Inhalt vonjQuery + Ajax implementiert den Datei-Upload (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!