업로드 폴더 : 앞뒤로
웹 개발은 파일 업로드 문제가 확실히 발생한다, 그리고 업로드 폴더가 더 어려운 것입니다. 폴더에 대한 온라인 정보에 더 많은 관심의 부족에 대한 프런트 엔드, 백엔드에 집중 업로드 한 다음 백 엔드 프레임 워크 문서 업로드 기사로 말하고 폴더를 포함하지 않을 수 있습니다. 오늘은이 레코드에이 문제를 연구한다.
내가이 문제에 대해 이야기 해 보자 :
백 엔드 프레임 워크는 업로드 폴더에 모든 지원 있습니까?
모든 브라우저가 업로드 폴더를 지원 있습니까?
첫번째 질문 : YES 번째 질문 : NO
형태의 지원을위한 백엔드 프레임 워크만큼이 완료 될 때, 다음 업로드 폴더가 지원해야합니다. 브라우저에 관해서는, 지금과 같은, 유일한 크롬을 지원합니다.
다른 브라우저가 지원하는 경우는 우선 대용량 파일 업로드 제어와 같은 플러그인의 도움이 필요합니다 : www.webuploader.net
WebUploader 설명에 기능 :
대용량 파일 업로드를 다시 시작
대용량 파일 업로드 (100G +) 및 이력서 지원, 브라우저를 닫을 수 있습니다, 아직 시스템을 다시 시작 업로드를 계속합니다.
오픈 소스
ASP.NET, JSP, PHP의 예와 구성 및 샘플 코드를 JSP MySQL은, 오라클, SQL Server 데이터베이스를 제공하는 소스 코드를 제공합니다.
조각, 동시
동시 결합 단편 다중으로 큰 파일 동시 업로드, 매우 큰 파일 업로드의 속도를 향상시킨다.
네트워크 문제는 전송 오류 원인 만이 아니라 전체 파일보다, 잘못된 슬라이스를 재전송해야하는 경우. 실시간 추적 업로드 진행을 더 세분화 전송뿐만 아니라.
미리보기, 압축
네트워크 데이터 전송 저장 인기있는 이미지 형식 JPG, JPEG, GIF, BMP, PNG 미리보기 및 압축을 지원합니다.
배향의 다양한 JPEG 메타 정보 분석은 모든 원래의 메타 데이터를 보유 업로드 이미지 압축 후 동시에 적절한 처리를 하였다.
다 채널 추가 파일
지원은 필터 유형, 드래그 앤 드롭 (파일 및 폴더), 사진 붙여 넣기 기능, 다중 파일 선택. 로컬 파일 지정된 경로를 업로드하는 버튼을 클릭하여 파일을 선택할 필요가 없습니다.
(예 : QQ (Ctrl + Alt + A) 복사 할 페이지의 사진을 클릭에 마우스 오른쪽 버튼으로 클릭으로 화면 캡처 도구가), Ctrl + V를이 이미지 파일에 추가 할 때 클립 보드에 데이터가있는 경우 기능이 주로 그림에 반영됩니다 붙여 넣습니다.
HTML5 및 플래시
주요 브라우저와 브라우저 버전 저와 호환 일관된 인터페이스는 두 개의 런타임 지원을 달성하기 위해, 사용자가 신경 쓰지 않는 것을 내부 사용을위한 커널. 그리고 IE6, IE8 브라우저를 지원합니다.
플래시 같은 시간 부분에서 확장하는 플래시 사용자와 사용자 정의 비즈니스 요구에 대해 신경 쓰지 쉬운에, 모든 작업 관련 UI를하지 않습니다.
IO 작업이 메모리 매핑 모드를 기반으로 수행, 운영 시스템의 성능을 발휘을 제공합니다.
MD5의 초 통과
큰 파일 크기, 상대적으로 긴 시간이, 업로드 지원하기 전에 파일의 MD5 값을 확인 할 때 일관성을 건너 뛸 수 있습니다.
서비스 종료 및 프런트 엔드 알고리즘 변경을 통합하는 경우, 20ms의 주위에 소모 크게 성능 검증을 향상시킬 수 있습니다, 섹션 MD5 걸릴.
확장 될 수 분할
분리 메커니즘의 사용, 다양한 기능의 독립성이 위젯이되었다, 자유롭게 혼합 할 수 있습니다.
AMD는 쉽게 고급 플레이어를 확장, 코드 사양 조직, 선명도를 사용합니다.
업로드 폴더
100,000 + 수준의 폴더에 업로드 이력서를 지원합니다.
계층 적 디렉토리 구조의 보존을 지원, 데이터베이스 수준의 정보를 업로드 한 후 데이터베이스에 저장 될 수있다.
MySQL은, 오라클, SQL Server 데이터베이스 지원을 제공합니다.
이력서 폴더 지원, 여전히, 브라우저를 다시 시작 새로 업로드 계속 할 수 있습니다.
크로스 도메인 지원을 업로드합니다.
PC의 끝 전체 플랫폼 지원
윈도우, 맥 OS, 리눅스를 지원합니다. 현지화를위한 운영 체제 지원, 정부의 정보 보안 프로그램에 대한 지원.
시스템의 낮은 버전을 지원하는 Windows : 윈도우 XP.
어떤 브라우저는 다음과 같습니다 IE6, IE7, IE8 (86, 64), IE9 (86, 64), IE10 (86, 64), IE11 (86, 64), 360 보안 브라우저, 360 스피드 브라우저, QQ 브라우저를 , Sogou는 브라우저, 맥스톤 (여행) 브라우저 1.X, 맥스톤 (맥스톤) 브라우저 2.X, 파이어 폭스, 크롬, 오페라 23+
업로드 할 폴더를 선택
폴더 업로드가 완료
업로드 후 서버에서 폴더 계층 구조
음, 모든 사용자가 폴더에 파일을 업로드 크롬, 어떻게 성공적으로하기 위해 어떻게 사용하고 있다고 가정? 다음은이 키에 물건을 떨어 뜨리지 않는, 그것은 가장 전통적인 <입력>입니다. 그것은 양식 수행 및 제출 방법에서, 아약스 제출보기 할 수 있습니다.
<form method="POST" enctype=multipart/form-data>
<input type='file' name="file" webkitdirectory >
<button>upload</button>
</form>
我们只要添加上 webkitdirectory 这个属性，在选择的时候就可以选择一个文件夹了，如果不加，文件夹被选中的时候就是灰色的。不过貌似加上这个属性就没法选中文件了... enctype=multipart/form-data 也是必要的，解释参见这里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上传文件夹/
如果用 ajax 方式，我们可以省去<form>，只留下<input>就 OK。
<input type='file' webkitdirectory >
<button id="upload-btn" type="button">upload</button>
但是这样是不够的，关键在于 Js 的使用。
var files = [];
$(document).ready(function(){
$("input").change(function(){
files = this.files;
});
});
$("#upload-btn").click(function(){
var fd = new FormData();
for (var i = 0; i < files.length; i++) {
fd.append("file", files[i]);
}
$.ajax({
url: "/upload/",
method: "POST",
data: fd,
contentType: false,
processData: false,
cache: false,
success: function(data){
console.log(data);
}
});
});
用 ajax 方式，我们必须手动构造一个 FormData Object, 然后放在 data 里面提交到后端。 FormData 好像就只有一个 append 方法，第一个参数是 key，第二个参数是 value，用来构造表单数据。ajax请求中，通过 input 元素的 files 属性获取上传的文件。files属性不论加不加 webkitdirectory 都是存在的，用法也基本一样。不过当我们上传文件夹时，files 中会包含文件相对路径的信息，之后会看到。
用 ajax 上传的好处有两点，首先是异步，这样不会导致页面卡住，其次是能比较方便地实现上传进度条。关于上传进度条的实现可以参考这里。需要注意的是contentType和processData必须设置成false，参考了这里：http://blog.ncmem.com/wordpress/2019/08/09/js怎么上传文件夹/