Dropzone.js : 셀레늄 php-webdrivers를 사용하여 파일을 업로드하는 방법

Question

내 프로젝트에서 dropzone.js를 사용하고 있습니다. 파일 브라우저 대화 상자를 열지 않고도 수동으로 대기열에 파일을 추가하고 싶습니다. dropzone은 이미 초기화되어 있습니다. 내가 파일을 추가하려면 다음 스크립트를 실행하려고하고있는 페이지에 클래스 .imageDropzone를 가진 요소,

Dropzone.autoDiscover=false; 
var myZone=Dropzone.forElement('.imageDropzone'); 
var fileList=$("input[accept='image/jpg,image/gif,image/png,image/jpeg']")[0].files; 
fileList.name="imageUploadTestJPG.jpg"; 
fileList.type="image/jpeg"; 
fileList.size=30170, 
fileList.path="http://mysite/img/imageUploadTestJPG.jpg"; 
fileList.mozFullPath="http://mysite/img/imageUploadTestJPG.jpg"; 
fileList.accept="image/jpg,image/gif,image/png,image/jpeg"; 

console.log(fileList); 
myZone.addFile(fileList); 

왜 내가이 일을하고있다?

.

2, 파일 형식 입력을 클릭 한 후 열린 파일 브라우저 대화를 내가 PHP - webdriver로 일하고 내가 업로드 기능을 테스트 할 필요가 서로 다른 OS에서 다른, OS 의존, 그리고 난 캔트 그 창으로 컨트롤을 이동, 그래서 그것을 클릭하여 파일 대화 상자를 여는이 프로세스를 건너 뛰고 자바 스크립트/jquery 수동으로 파일을 추가하고 싶습니다 autoProcessFiles=true 그래서 파일 업로드 프로세스가 시작되면 bu 나는 그것을 해결할 수 없습니다.

내가 Dropzone.addFile()를 호출하려고

나는 다음과 같은

TypeError: Argument 2 of FormData.append does not implement interface Blob

I 이벤트가 다른 방법 즉

1을 시도받을 수 있습니다. dropzone이 을 바인드하기 때문에 dropzone으로 초기화 된 파일 입력에 파일 경로를 추가하십시오. file inputs은 dropzone으로 초기화되며 곧 파일 경로가 제공되어 change event listener이 트리거를 시작하고 파일을 업로드하지만 수정을 시도합니다 dropzone이 초기화 된 파일 입력 값이 보안 예외를 발생시킵니다.

. 또한 <input type=file>은 초기화되었을 때 dropzone.js 스크립트에 의해 숨겨져 있습니다. php-webdriver가 숨겨진 요소와 상호 작용할 수 없기 때문에이 문제에 봉착했습니다. 도움이나 안내가 도움이 될 것입니다. 완료

Answer 1

,

문제는 당신이 수표를 볼 수는 dropzone.js 파일을 열고 거기에 Dropzone.prototype.init 기능으로 이동 .If myZone.addFile()에 제공된 파일리스트 객체의 형식이었다

if (this.clickableElements.length) {

이 체크 박스 안에 dropzone이 생성되면 &은 숨겨진 파일 입력을 구성한 다음 해당 입력 요소를 본문 document.body.appendChild(_this.hiddenFileInput);에 연결하고이 라인 dropzone 바로 뒤에를 추가합니다이벤트 리스너가 생성 된 파일 유형 입력에 우리가 파일 찾기 창을 통해 파일을 제공하자마자 발생합니다.

return _this.hiddenFileInput.addEventListener("change", function() {

우리가 발사 파일을 제공하고 만들 때 당신은 당신이 FileList { 0=File, length=1, item=item(), more...}을 만든 파일 목록을 볼 수 콘솔 console.log(files)에서 그것을 로그온을 시도 할 경우 FileList 객체는

files = _this.hiddenFileInput.files;

참조 이 객체를 클릭하면 방화범 아래에서 자세한 내용을 볼 수 있습니다

0   File { size=21789, type="image/png", name="1-7-2013 6-19-44 PM.png", more...} 
length  1 
__proto__ FileListPrototype { item=item(), @@iterator=@@iterator()} 

지금은 결과를 개체 파일 목록을 만드는 한 방법은

_removeLink ----- a.dz-remove javascrip...defined; 
accept  ----- "image/jpg,image/gif,image/png,image/jpeg" 
accepted ----- true 
mozFullPath ----- "http://mysite/img/imageUploadTestJPG.jpg" 
name  ----- "imageUploadTestJPG.jpg" 
path  ----- "http://mysite/img/imageUploadTestJPG.jpg" 
previewElement -- div.dz-preview 
previewTemplate --- div.dz-preview 
processing ----- true  
size    30170 
status  ----- "uploading" 
type    "image/jpeg"  
upload  ----- Object { progress=0, total=30170, bytesSent=0} 
xhr   XMLHttpRequest { readyState=1, timeout=0, withCredentials=false, more...} 
length    0 
__proto__   FileListPrototype { item=item(), @@iterator=@@iterator()} 

공지 내장 내 사용자 지정의 결과입니다 두번째 반면 파일의 세부 사항을 포함하는 첫 번째 세부 사항 인덱스 0 다음되었다 691,363,210

FileList 객체는 색인 0 내부가 아니라 주에있는 파일의 모든 세부 정보를 포함합니다.

그래서는 해당 응답을 할당 먼저 이미지에 xmlHttpRequest 요청을 보내고 arraybuffer의 응답 타입을 지정 통해 BLOB를 획득하고 상기 이미지 데이터에 대한 blob URL를 얻어했던 것과 같은 동일한 목적을 만드는 파일 개체를 할당하고 input.file에 할당하고 Dropzone.addFile()을 호출합니다. 프로세스에 대한 완전한 설명은 아래에 있으며 파일 찾아보기 창을 열지 않고 파일을 업로드 할 수 있으며 셀레늄과 함께 dropzone.js를 사용할 수 있습니다.

// Simulate a call to service that can 
// return an image as an ArrayBuffer. 
var xhr = new XMLHttpRequest(); 

// Use JSFiddle logo as a sample image to avoid complicating 
// this example with cross-domain issues. 
xhr.open("GET", "http://localhost/path/to/my/image.jpg", true); 

// Ask for the result as an ArrayBuffer. 
xhr.responseType = "arraybuffer"; 

xhr.onload = function(e) { 
    // Obtain a blob: URL for the image data. 
    var arrayBufferView = new Uint8Array(this.response); 
    var blob = new Blob([ arrayBufferView ], { type: "image/jpeg" }); 
    var urlCreator = window.URL || window.webkitURL; 
    var imageUrl = urlCreator.createObjectURL(blob); 

    var parts = [blob, new ArrayBuffer()]; 

    file = new File(parts, "imageUploadTestFile", { 
     lastModified: new Date(0), // optional - default = now 
     type: "image/jpeg" 
    }); 

    $("input[accept=\'image/jpg,image/gif,image/png,image/jpeg\']").files = [file]; 
    myzone = Dropzone.forElement(".imageDropzone"); 
    myzone.addFile(file); 
}; 
xhr.send();