jQuery-Plug-in ajaxFileUpload
- 高洛峰Original
- 2016-12-12 17:29:271593Durchsuche
ajaxFileUpload.js Es gibt viele Namen mit demselben Namen, da es einfach ist, einen zu erstellen.
Ich verwende dies: https://github.com/carlcarl/AjaxFileUpload
Die Download-Adresse ist hier: http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File
AjaxFileUpload.js ist kein sehr bekanntes Plug-in. Es wurde nur von anderen geschrieben und für alle freigegeben. Das Prinzip besteht darin, versteckte Formulare und Iframes zu erstellen und diese dann mit JS einzureichen Rückgabewert.
Ich habe ursprünglich eine asynchrone Upload-Funktion erstellt und sie ausgewählt, weil ihre Konfigurationsmethode eher dem AJAX von jQuery ähnelt, was mir sehr gefällt.
Was in den Kommentaren gesagt wird, funktioniert nicht. Das liegt daran, dass wir nicht dasselbe js verwenden. Ich habe auf Github nach AjaxFileUpload gesucht und viele ähnliche JS gefunden.
ajaxFileUpload ist ein jQuery-Plug-in zum asynchronen Hochladen von Dateien
Laden Sie eine unbekannte Version hoch, damit Sie in Zukunft nicht überall danach suchen müssen.
Syntax: $.ajaxFileUpload([options])
Optionsparameterbeschreibung:
1.
2. fileElementId Die ID des Dateifelds, das hochgeladen werden muss, also die ID von 3525558f8f338d4ea90ebf22e5cde2bc.
3. secureuri Ob die sichere Übermittlung aktiviert werden soll, der Standardwert ist false.
4, dataType Der vom Server zurückgegebene Datentyp. Kann XML, Skript, JSON, HTML sein. Wenn Sie es nicht ausfüllen, wird es von jQuery automatisch ermittelt.
5, Erfolg ist eine Verarbeitungsfunktion, die nach erfolgreicher Übermittlung automatisch ausgeführt wird. Die Parameterdaten sind die vom Server zurückgegebenen Daten.
6, Fehler Behandlungsfunktion, die automatisch ausgeführt wird, wenn die Übermittlung fehlschlägt.
7, Daten Benutzerdefinierte Parameter. Dieses Ding ist nützlicher, wenn Daten zum hochgeladenen Bild vorhanden sind.
8, geben Sie ein.
Fehlermeldung:
1, SyntaxErr oder: fehlt ; vor Anweisungsfehler
Wenn dieser Fehler auftritt, müssen Sie überprüfen, ob der URL-Pfad vorhanden ist ist zugänglich
2, SyntaxError: Syntaxfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob ein Syntaxfehler im Hintergrundhandler des Servers vorliegt, der den Übermittlungsvorgang verarbeitet
3, SyntaxError: Fehler aufgrund einer ungültigen Eigenschafts-ID
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob die Textfeldattribut-ID vorhanden ist
4, SyntaxError: fehlt } im XML-Ausdrucksfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob der Dateiname konsistent ist oder nicht vorhanden
5. Andere benutzerdefinierte Fehler
Sie können die Variable $error direkt verwenden, um zu überprüfen, ob jeder Parameter korrekt ist. Dies ist viel praktischer als die oben genannten ungültigen Fehleraufforderungen.
Verwendung:
Schritt eins: Stellen Sie zunächst die Plug-Ins jQuery und ajaxFileUpload vor. Achten Sie selbstverständlich auf die Reihenfolge.
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>Schritt 2: HTML-Code:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>Schritt 3: JS-Code
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>Schritt 4: Backend-Seite upload.aspx-Code:
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}Nehmen wir ein Beispiel der MVC-Version:
Controller-Code
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
if (hfc.Count > 0)
{
imgPath = "/testUpload" + hfc[0].FileName;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
return Content(imgPath);
}
}Front-End-Ansicht, HTML- und JS-Code geben nach erfolgreichem Upload den Originalcode zurück Bildadresse und binden Sie es an die SRC-Adresse von
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
Schließlich ist hier ein Beispiel für das Hochladen eines Bildes mit Parametern: Controller-Code:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
if (hfc.Count > 0)
{
imgPath = "/testUpload" + hfc[0].FileName;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
//注意要写好后面的第二第三个参数
return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
}
}Indexansicht Code:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>