JS 및 WebService 대용량 파일 업로드 코드 공유

프런트 엔드를 작성하는 과정에서 파일 업로드 문제가 불가피하게 발생합니다. 사용자가 더 큰 파일을 업로드하려고 하면 서버에 의해 제한되어 업로드가 불가능합니다. 서버에서 허용하는 파일의 크기를 조정합니다. 구성 방법은 다음과 같습니다.

ASP에서 Web.config 파일의 httpRuntime을 구성합니다.

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

각 매개 변수의 역할은 다음과 같습니다.

executionTimeout: 요청을 실행하는 데 허용되는 최대 시간 제한(초)입니다.
maxRequestLength: ASP.NET에서 지원하는 최대 파일 업로드 크기를 나타냅니다. 이 제한은 사용자가 서버에 많은 수의 파일을 전달함으로써 발생하는 서비스 거부 공격을 방지하는 데 사용될 수 있습니다. 지정된 크기는 KB 단위입니다. 기본값은 4096KB(4MB)입니다.
useFullyQualifiedRedirectUr: 클라이언트 리디렉션이 정규화되었는지(일부 모바일 컨트롤에 필요한 "http://server/path" 형식) 또는 대신 클라이언트에 상대 리디렉션을 보낼지 여부를 나타냅니다. True이면 정규화되지 않은 모든 리디렉션이 자동으로 정규화된 형식으로 변환됩니다. false가 기본 옵션입니다.
minFreeThreads: 새 요청을 실행하는 데 허용되는 최소 여유 스레드 수를 나타냅니다. ASP.NET은 처리를 완료하기 위해 추가 스레드가 필요한 요청에 대해 지정된 수의 스레드를 사용 가능한 상태로 유지합니다. 기본값은 8입니다.
minLocalRequestFreeThreads: 새 로컬 요청을 실행하도록 허용되는 ASP.NET에서 유지 관리하는 최소 여유 스레드 수를 나타냅니다. 이 스레드 수는 일부 요청이 처리 중에 로컬 호스트에 하위 요청을 하는 경우 로컬 호스트에서 들어오는 요청을 위해 예약되어 있습니다. 이렇게 하면 웹 서버에 재귀적으로 다시 진입하여 발생할 수 있는 교착 상태를 방지할 수 있습니다.
appRequestQueueLimit: ASP.NET이 애플리케이션에 대해 대기열에 넣을 최대 요청 수를 나타냅니다. 요청을 처리할 여유 스레드가 충분하지 않으면 요청이 대기열에 추가됩니다. 대기열이 이 설정에 지정된 제한을 초과하면 "503 - 서버 사용량이 너무 많습니다" 오류 메시지와 함께 들어오는 요청이 거부됩니다. 활성화VersionHeader: ASP.NET이 버전 헤더를 출력해야 하는지 여부를 지정할지 여부를 나타냅니다. Microsoft Visual Studio 2005에서는 이 속성을 사용하여 현재 사용 중인 ASP.NET 버전을 확인합니다. 프로덕션 환경의 경우 이 속성은 필요하지 않으며 비활성화할 수 있습니다.

단, 서버 구성에 업로드된 파일이 충분히 크더라도 IIS에 의해 제한되어 사용자에게 안전한 서비스를 제공할 수 없습니다. 그렇다면 대용량 파일 업로드 문제를 해결할 수 있는 방법은 없을까요?
분명히 하나가 있습니다: 멀티파트 업로드입니다.
다중 업로드는 업로드하려는 파일을 프런트 엔드에서 아주 작은 조각으로 잘라서 서버에 전달한 다음, 서버에서 해당 파일을 완전한 파일로 결합하는 것을 말합니다.
프런트엔드부터 시작해 보겠습니다. 다중 부분 업로드 프로세스 중 프런트엔드 작업은 파일을 조각화하는 것입니다. 조각화하는 방법에는 여러 가지가 있습니다. 예를 들어 조각화를 위해 WebUpLoader에서 제공하는 업로드 구성 요소를 사용할 수 있습니다. 또는 JS 및 JQ에서 제공하는 업로드 구성 요소를 사용할 수 있습니다. 코드 예제는 다음과 같습니다.

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);
}
}

프론트 엔드에서는 물론 백엔드에서의 수락과 조합이 필수입니다. .Net을 예로 들어 파일 수신 및 결합 방법을 설명합니다.

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();
                }
            }
        }

관련 권장 사항:

php 파일 크기 감지 및 대용량 파일 업로드 처리

WebService를 호출하는 Nodejs에 대한 자세한 설명

JS WebService를 호출하는 도메인 간 간단한 예

위 내용은 JS 및 WebService 대용량 파일 업로드 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!