Heim > Web-Frontend > js-Tutorial > jQuery + Ajax implementiert den Datei-Upload (mit Code)

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

php中世界最好的语言
Freigeben: 2018-04-26 11:07:34
Original
1785 Leute haben es durchsucht

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>
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage