Beispielanalyse für die Verwendung des jQuery-Plug-ins ajaxFileUpload
- 高洛峰Original
- 2016-12-09 16:01:441270Durchsuche
AjaxFileUpload.js ist kein sehr bekanntes Plug-in. Es wurde nur von anderen geschrieben und für jedermann freigegeben. Das Prinzip besteht darin, versteckte Formulare und Iframes zu erstellen und diese dann mit JS zu übermitteln und den Rückgabewert zu erhalten.
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 Version hoch, die Sie nicht kennen, damit Sie nicht überall danach suchen müssen die Zukunft.
Syntax: $.ajaxFileUpload([Optionen])
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, Typ: Beim Senden benutzerdefinierter Parameter sollte dieser Parameter auf „post“ gesetzt werden
Fehlermeldung:
1 > Wenn dieser Fehler auftritt, müssen Sie prüfen, ob auf den URL-Pfad zugegriffen werden kann
2. SyntaxError: Syntaxfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob ein Syntaxfehler im Server-Hintergrundhandler vorliegt, der verarbeitet der Übermittlungsvorgang
3. SyntaxError: Ungültige Eigenschafts-ID-Fehler
Wenn dieser Fehler auftritt, müssen Sie überprüfen, ob die Textfeldattribut-ID vorhanden ist
4. SyntaxError: fehlt } im XML-Ausdrucksfehler
Wenn Wenn dieser Fehler auftritt, müssen Sie überprüfen, ob der Dateiname konsistent oder nicht vorhanden ist
5. Andere benutzerdefinierte Fehler
Sie können die Variable $error direkt zum Drucken verwenden, um zu überprüfen, ob jeder Parameter korrekt ist, was viel ist praktischer als die oben aufgeführten ungültigen Fehlermeldungen.
<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>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();
}
}
Laden Sie den vollständigen Code dieses Beispiels herunterNehmen wir ein Beispiel der MVC-Version: Controller-Codepublic 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);
}
} Frontend-Ansicht, HTML- und JS-Code geben nach erfolgreichem Upload die tatsächliche Adresse des Bildes zurück und binden es an die SRC-Adresse von <html>
<head>
<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 () {
if ($("#file1").val().length > 0) {
ajaxFileUpload();
}
else {
alert("请选择图片");
}
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/Home/Upload', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data);
$("#img1").attr("src", data);
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>
</head>
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>
Abschließend finden Sie 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);
}
}
Indexansichtscode : <html>
<head>
<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 () {
if ($("#file1").val().length > 0) {
ajaxFileUpload();
}
else {
alert("请选择图片");
}
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/Home/Upload', //用于文件上传的服务器端请求地址
type: 'post',
data: { Id: '123', name: 'lunis' }, //此参数非常严谨，写错一个引号都不行
secureuri: false, //一般设置为false
fileElementId: 'file1', //文件上传空间的id属性 <input type="file" id="file" name="file" />
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
alert(data);
$("#img1").attr("src", data.imgPath1);
alert("你请求的Id是" + data.Id + " " + "你请求的名字是:" + data.name);
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>
</head>
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
</html>
In diesem Beispiel wird das asynchron hochgeladene Bild angezeigt und gleichzeitig werden die benutzerdefinierten Übertragungsparameter angezeigt. Die Download-Adresse dieses Beispiels 28. Januar 2013. Während des heutigen Debugging-Prozesses habe ich ein Problem entdeckt, das heißt, als Dateifeld (3525558f8f338d4ea90ebf22e5cde2bc) muss es Wenn kein Namensattribut vorhanden ist, kann der Server das Bild nach dem Hochladen nicht abrufen. Beispiel: Die korrekte Schreibweise lautet 1625fd9857f7b13408acebf8011bf09a Am 28. Januar 2013 wurde die Ursache für den klassischsten Fehler gefunden endlich gefunden. Die Objektfunktion (a,b){return new e.fn.init(a,b,h)} hat keine Methode „handleError“. Das ist ein sehr klassischer Fehler Es ist mein Versionsproblem oder nicht. Das eigentliche Problem. Die Grundursache für dieses Problem wurde nach N Uploads gefunden. Die Antwort lautet: Der dataType-Parameter muss in Großbuchstaben angegeben werden. Beispiel: dataType: 'HTML'. 28.07.2016, ein Fehler in den Kommentaren: TypeError: $.ajaxFileUpload ist keine Funktion Wir verwenden nicht dasselbe JS, Sie haben ein anderes AJAXFileUpload heruntergeladen.