Heim > Artikel > Web-Frontend > Verwenden Sie Jquery, um das Hochladen von Dateien mithilfe des FormData-Attributs von HTML5 zu implementieren

Verwenden Sie Jquery, um das Hochladen von Dateien mithilfe des FormData-Attributs von HTML5 zu implementieren

零下一度Original: 2017-04-25 11:45:141223Durchsuche

In diesem Artikel werden die Methoden und Beispiele für die Verwendung von Jquery zur Verwendung des FormData-Attributs von HTML5 zum Hochladen von Dateien vorgestellt. Dies ist sehr praktisch und Freunde in Not können darauf zurückgreifen.

1. Verwenden Sie Jquery, um das FormData-Attribut von HTML5 zum Hochladen von Dateien zu verwenden.

Wenn wir vor HTML5 Funktionen wie Datei-Upload-Server implementieren mussten, mussten wir uns manchmal auf die FLASH-Implementierung verlassen , und nach der Einführung von HTML5 können wir einfach ein FormData-Attribut von HTML5 verwenden und es mit Jquery kombinieren, um Dateien einfach hochzuladen und den Upload-Fortschritt der Datei zu lesen Um die oben erwähnte Implementierung umzusetzen, werde ich unten den gesamten JS-, CSS- und HTML-Seitencode einfügen.

Hinweis: Das FormData-Attribut muss von HTML5 abhängen. Wenn Sie also die Funktionen gemäß dem Code in diesem Artikel implementieren, muss der Browser auf die neueste Version aktualisiert werden (unterstützt das HTML5-FormData-Attribut).

2. Der HTML-Seitencode lautet wie folgt:

 <!DOCTYPE html>
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="utf-8" />
     <title>使用HTML的FormData属性实现文件上传</title>
     <link rel="stylesheet" href="../css/fileUpload.css" />
   </head>
   <body>
     <table id="uploadTable" style="border: 1px;"></table>
     <br/>
     <a href="javascript:void(0);" class="input-file">
       添加文件<input type="file" id="txtFile" style="width:200px;" />
     </a>
     <script type="text/javascript" src="../js/jquery-1.7.1-min.js"></script>
 
     <script type="text/javascript">
       $(function () {
         $(&#39;#uploadTable&#39;).SalesMOUNDUpload({
           saveUrl: &#39;/Test/Save&#39;,
           jqInput: $(&#39;#txtFile&#39;),
           fnRemove: removeFile,
           fnComplete: function (d) {
             window.console.log(&#39;complete &#39; + d);
           }
         });
       });
       function removeFile(d) {
         $.post(&#39;/Test/Remove&#39;, { "filename": d }, function(r) {
           
         });
       }
     </script>
   </body>
 </html>

3. Der JS-Code lautet wie folgt :

 /*源文件头信息：
 <copyright file="FileUpload.js">
 Copyright(c)2014-2034 Kencery.All rights reserved.
 个人博客：http://www.cnblogs.com/hanyinglong
 创建人：韩迎龙(kencery)
 创建时间：2015-6-24
 </copyright>*/
 
 body
 {
   font-family: "微软雅黑";
   font-size: 12px;
 }
 .input-file {
   overflow: hidden;
   position: relative;
 }
 .input-file input {
   opacity: 0;
   filter: alpha(opacity=0);
   font-size: 100px;
   position: absolute;
   top: 0;
   right: 0;
 }
 #uploadTable {
   width: 500px;
   border-collapse: collapse;
   border: 1px solid Silver;
 }

Das obige ist der detaillierte Inhalt vonVerwenden Sie Jquery, um das Hochladen von Dateien mithilfe des FormData-Attributs von HTML5 zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Wie kann das Problem des Hochladens der Bildrichtung in HTML5 unter IOS gelöst werden?Nächster Artikel：Wie kann das Problem des Hochladens der Bildrichtung in HTML5 unter IOS gelöst werden?

In Verbindung stehende Artikel

Mehr sehen