Heim  >  Artikel  >  Web-Frontend  >  JS- und WebService-Upload-Code für große Dateien

JS- und WebService-Upload-Code für große Dateien

小云云
小云云Original
2018-03-07 15:23:492379Durchsuche

Während des Schreibens des Front-Ends ist es unvermeidlich, auf das Problem des Datei-Uploads zu stoßen. Wenn Benutzer größere Dateien hochladen möchten, werden sie vom Server eingeschränkt und am Hochladen gehindert. Passen Sie die Fähigkeit des Servers an, Dateien zu akzeptieren. Die Größenkonfigurationsmethode ist wie folgt:

Konfigurieren Sie die httpRuntime der Web.config-Datei in ASP:

<httpRuntime executionTimeout="90" maxRequestLength="40960" useFullyQualifiedRedirectUrl="false"minFreeThreads="8" 
minLocalRequestFreeThreads="4" appRequestQueueLimit="100" enableVersionHeader="false"/>

Die Funktionen der einzelnen Dateien Parameter sind:

executionTimeout: Gibt das maximal zulässige Zeitlimit für die Ausführung der Anforderung in Sekunden an.
maxRequestLength: Gibt die maximale Datei-Upload-Größe an, die von ASP.NET unterstützt wird. Dieses Limit kann verwendet werden, um Denial-of-Service-Angriffe zu verhindern, die dadurch verursacht werden, dass Benutzer eine große Anzahl von Dateien an den Server weiterleiten. Die angegebene Größe ist in KB. Der Standardwert ist 4096 KB (4 MB).
useFullyQualifiedRedirectUr: Gibt an, ob die Client-Umleitung vollständig qualifiziert ist (im Format „http://server/path“, das für einige mobile Steuerelemente erforderlich ist) oder ob stattdessen eine relative Umleitung verwendet werden soll. An den Client gesendet. Bei „True“ werden alle Weiterleitungen, die nicht vollständig qualifiziert sind, automatisch in das vollständig qualifizierte Format konvertiert. false ist die Standardoption.
minFreeThreads: Gibt die Mindestanzahl freier Threads an, die zum Ausführen neuer Anforderungen zulässig sind. ASP.NET hält eine bestimmte Anzahl von Threads für Anforderungen frei, für deren Verarbeitung zusätzliche Threads erforderlich sind. Der Standardwert ist 8.
minLocalRequestFreeThreads: Gibt die Mindestanzahl der von ASP.NET verwalteten freien Threads an, die neue lokale Anforderungen ausführen dürfen. Diese Anzahl an Threads ist für eingehende Anfragen vom lokalen Host reserviert, falls einige Anfragen während ihrer Verarbeitung Unteranfragen an den lokalen Host stellen. Dies vermeidet mögliche Deadlocks, die durch rekursives erneutes Betreten des Webservers verursacht werden.
appRequestQueueLimit: Gibt die maximale Anzahl von Anforderungen an, die ASP.NET für die Anwendung in die Warteschlange stellt. Anfragen werden in die Warteschlange gestellt, wenn nicht genügend freie Threads zur Bearbeitung der Anfrage vorhanden sind. Wenn die Warteschlange den in dieser Einstellung angegebenen Grenzwert überschreitet, werden eingehende Anfragen mit der Fehlermeldung „503 – Server zu beschäftigt“ abgelehnt. enableVersionHeader: Gibt an, ob ASP.NET einen Versionsheader ausgeben soll. Microsoft Visual Studio 2005 verwendet diese Eigenschaft, um die derzeit verwendete Version von ASP.NET zu ermitteln. Für Produktionsumgebungen ist diese Eigenschaft nicht erforderlich und kann deaktiviert werden.

Selbst wenn die hochgeladene Datei in der Serverkonfiguration groß genug ist, wird sie durch IIS eingeschränkt und kann Benutzern keine sicheren Dienste bieten. Gibt es also eine Möglichkeit, das Problem des Hochladens großer Dateien zu lösen?
Es gibt definitiv eines: Multipart-Upload.
Mehrfach-Upload bedeutet, dass die Datei, die Sie hochladen möchten, am Frontend in sehr kleine Teile zerschnitten, dann an den Server übergeben und dann vom Server aus zu einer vollständigen Datei zusammengefügt wird.
Beginnen wir mit dem Front-End. Die Aufgabe des Front-Ends besteht darin, die Datei zu fragmentieren. Sie können beispielsweise die von WebUpLoader bereitgestellte Upload-Komponente verwenden Fragment, oder Sie können JS und JQ verwenden. Das Codebeispiel lautet wie folgt:

var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .
var slices;
var totalSlices;

//发送请求
function sendRequest() {
var blob = document.getElementById("yourID").files[0];
var start = 0;
var end;
var index = 0;


// 计算文件切片总数
slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
totalSlices= slices;
while(start < blob.size) {
end = start + BYTES_PER_CHUNK;
if(end > blob.size) {
end = blob.size;
}
uploadFile(blob, index, start, end);
start = end;
index++;
if ( index>=totalSlices )
alert("Complete!!");
}
}

//上传文件
function uploadFile(blob, index, start, end) {
var xhr;
var fd;
var chunk;  
var sliceIndex=blob.name+index;
chunk =blob.slice(start,end);//切割文件

fd = new FormData();
fd.append("FileName", chunk, sliceIndex);
var xhr = new XMLHttpRequest();
xhr.open(&#39;POST&#39;, &#39;Server URL&#39;, false);//false,同步上传;ture,异步上传
xhr.send(fd);
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
setTimeout("",10);
}else{
uploadFile(blob, index, start, end);
}
}

Beim Frontend sind natürlich die Akzeptanz und Kombination am Backend unverzichtbar. Hier verwende ich ASP.Net als Beispiel, um zu erklären, wie Dateien empfangen und kombiniert werden.

public void RecoveryKPJD()
        {
            HttpContext context = System.Web.HttpContext.Current;
            context.Response.ContentType = "text/plain";
            //如果进行了分片
            if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
            {
                //取得chunk和chunks
                int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序(从0开始)
                int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数
                //根据GUID创建用该GUID命名的临时文件夹
                string folder = Your Path + context.Request["guid"] + "/";
                string path = folder + chunk;


                //建立临时传输文件夹
                if (!Directory.Exists(Path.GetDirectoryName(folder)))
                {
                    Directory.CreateDirectory(folder);
                }

                FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
                BinaryWriter AddWriter = new BinaryWriter(addFile);
                //获得上传的分片数据流
                HttpPostedFile file = context.Request.Files[0];
                Stream stream = file.InputStream;

                BinaryReader TempReader = new BinaryReader(stream);
                //将上传的分片追加到临时文件末尾
                AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                //关闭BinaryReader文件阅读器
                TempReader.Close();
                stream.Close();
                AddWriter.Close();
                addFile.Close();

                TempReader.Dispose();
                stream.Dispose();
                AddWriter.Dispose();
                addFile.Dispose();
                if (chunk == chunks - 1)
                {
                    //合并文件
                    ProcessRequest(context.Request["guid"], Path.GetExtension(file.FileName));
                }
            }
            else//没有分片直接保存
            {
                string targetPath = ""; //此处写文件的保存路径
                context.Request.Files[0].SaveAs(targetPath);
            }
        }

   private void ProcessRequest(string guid, string fileExt)
        {
            HttpContext context = System.Web.HttpContext.Current;
            context.Response.ContentType = "text/plain";
            string sourcePath = Path.Combine("Your Path", guid + "/");//源数据文件夹
            string targetPath = Path.Combine("Your Path", Guid.NewGuid() + fileExt);//合并后的文件

            DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);
            if (Directory.Exists(Path.GetDirectoryName(sourcePath)))
            {
                FileInfo[] files = dicInfo.GetFiles();
                foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))
                {
                    FileStream addFile = new FileStream(targetPath, FileMode.AppenFileAccess.Write);
                    BinaryWriter AddWriter = new BinaryWriter(addFile);

                    //获得上传的分片数据流
                    Stream stream = file.Open(FileMode.Open);
                    BinaryReader TempReader = new BinaryReader(stream);
                    //将上传的分片追加到临时文件末尾
                    AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                    //关闭BinaryReader文件阅读器
                    TempReader.Close();
                    stream.Close();
                    AddWriter.Close();
                    addFile.Close();

                    TempReader.Dispose();
                    stream.Dispose();
                    AddWriter.Dispose();
                    addFile.Dispose();
                }
            }
        }

Verwandte Empfehlungen:

PHP-Dateigrößenerkennung und Verarbeitung großer Datei-Uploads

Detaillierte Erläuterung des Nodejs-Aufrufs WebService

Ein einfaches Beispiel für den domänenübergreifenden Aufruf von WebService durch js

Das obige ist der detaillierte Inhalt vonJS- und WebService-Upload-Code für große Dateien. 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