1. 삭제 이미지는
나는 jsfiddle을했습니다. 그것은 당신이 언급 한 html5demos.com page의 제거 다운 버전,하지만 :
- 가 나는
<input type="file"> 로컬 컴퓨터에서 이미지 파일을 선택하는 데 사용할 수있는 태그 및
- 나는 또한 추가 추가
<input type="button"> 태그를 onclick 처리기로 처리합니다.이 핸들러는 에 의해 "드롭 파일"이벤트를 시뮬레이트하여 ondrop 이벤트 처리기을 DND- 대상 div 태그로 직접 호출합니다.
ondrop 핸들러는 다음과 같다 :
- 가
files 어레이 서브 필드와 dataTransfer 필드를 갖고있다 holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
}
, 우리 ondrop의 인수를 전달해야한다 선택한 File을 포함하고
- 은
preventDefault입니다. 메서드 (몸체가없는 함수). function simulateDrop() {
var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];
holder.ondrop({
dataTransfer: { files: [ file ] },
preventDefault: function() {}
});
}
테스트
- 이미지 파일 (PNG, JPEG 또는 GIF)을 선택
:
그래서 "드롭 시뮬레이션"버튼의 onclick 핸들러는 다음과 같다
"시뮬레이션 드롭"버튼을 클릭하십시오.
결과
2. 사용자 상호 작용 (GOOGLE CHROME ONLY!!!)없이 자동 생성 된 테스트 파일을 삭제는
나는 다른 jsfiddle을했습니다.
- 는 임시 파일 시스템에 텍스트 파일을 생성하고,
- 로드와 대상
<div>에이 텍스트 파일을 삭제; 페이지가로드 될 때, 함수가 호출됩니다
- 은 임시 파일 시스템에 이미지 파일을 만들고
- 은이 이미지 파일을 대상인
<div>에로드 및 드롭합니다.
이 드롭 시뮬레이터 함수 호출의 코드는 다음과 같다 :
(function() {
var fileErrorHandler = function (e) {
var msg = "";
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = "QUOTA_EXCEEDED_ERR";
break;
case FileError.NOT_FOUND_ERR:
msg = "NOT_FOUND_ERR";
break;
case FileError.SECURITY_ERR:
msg = "SECURITY_ERR";
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = "INVALID_MODIFICATION_ERR";
break;
case FileError.INVALID_STATE_ERR:
msg = "INVALID_STATE_ERR";
break;
default:
msg = "Unknown Error";
break;
};
console.log("Error: " + msg);
},
requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem,
dropFile = function (file) {
holder.ondrop({
dataTransfer: { files: [ file ] },
preventDefault: function() {}
});
};
if (!requestFileSystem) {
console.log("FileSystem API is not supported");
return;
}
requestFileSystem(
window.TEMPORARY,
1024 * 1024,
function (fileSystem) {
var textFile = {
name: "test.txt",
content: "hello, world",
contentType: "text/plain"
},
imageFile = {
name: "test.png",
content: "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
contentType: "image/png",
contentBytes: function() {
var byteCharacters = atob(this.content),
byteArrays = [], offset, sliceSize = 512, slice, byteNumbers, i, byteArray;
for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = new Array(slice.length);
for (i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return byteArrays;
}
};
// Create and drop text file
fileSystem.root.getFile(
textFile.name,
{ create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("Write completed (" + textFile.name + ")");
fileSystem.root.getFile(
textFile.name,
{},
function (fileEntry) {
fileEntry.file(
function (file) {
dropFile(file);
},
fileErrorHandler
);
},
fileErrorHandler
);
};
fileWriter.onerror = function(e) {
console.log("Write failed (" + textFile.name + "): " + e.toString());
};
fileWriter.write(new Blob([ textFile.content ], { type: textFile.contentType }));
},
fileErrorHandler
);
},
fileErrorHandler
);
// Create and drop image file
fileSystem.root.getFile(
imageFile.name,
{ create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("Write completed (" + imageFile.name + ")");
fileSystem.root.getFile(
imageFile.name,
{},
function (fileEntry) {
fileEntry.file(
function (file) {
dropFile(file);
},
fileErrorHandler
);
},
fileErrorHandler
);
};
fileWriter.onerror = function(e) {
console.log("Write failed (" + imageFile.name + "): " + e.toString());
};
fileWriter.write(new Blob(imageFile.contentBytes(), { type: imageFile.contentType }));
},
fileErrorHandler
);
},
fileErrorHandler
);
},
fileErrorHandler
);
})();
자동 생성 된 텍스트 파일의 내용을 문자열로 제공되며, 이미지 파일의 내용이 주어진다 base64로 인코딩 된 문자열로. 이들은 쉽게 바꿀 수 있습니다. 예를 들어 테스트 텍스트 파일에는 일반 텍스트뿐만 아니라 HTML도 포함될 수 있습니다. 이 경우 textFile.contentType 필드를 text/plain에서 text/html으로 변경하고이 콘텐츠 유형을 acceptedTypes 배열 및 previewfile 기능에 추가하는 것을 잊지 마십시오. 테스트 이미지도 쉽게 변경할 수 있습니다. image-to-base64 converter 만 있으면됩니다.
이
acceptedTypes = {
'text/plain': true, // <-- I added this
'image/png': true,
'image/jpeg': true,
'image/gif': true
},
...
function previewfile(file) {
if (tests.filereader === true && acceptedTypes[file.type] === true) {
var reader = new FileReader();
if (file.type === 'text/plain') { // <-- I added this branch
reader.onload = function (event) {
var p = document.createElement("p");
p.innerText = event.target.result;
holder.appendChild(p);
}
reader.readAsText(file);
} else {
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.width = 250; // a fake resize
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
} else {
holder.innerHTML += '<p>Uploaded ' + file.name + ', ' + file.size + ' B, ' + file.type;
console.log(file);
}
}
참고 jsfiddle를로드 한 후, 자동 생성 된 파일을 디버깅 목적으로 나열 될 수있다 :
나는 이미지에 추가하여 텍스트 파일을 처리 할 수있는 드롭 처리기 코드를 확장했다
결과
스크린 샷은 시뮬레이션 된 드롭이 자동 생성 된 이미지의 내용을 자동 생성 된 이미지 앞에 삽입 한 것을 보여줍니다.통화 거부 대상 <div>의 HTML 코드는 다음과 같습니다
<div id="holder" class="">
<p>hello, world</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggkFBTzlUWEwwWTRPSHdBQUFBQkpSVTVFcmtKZ2dnPT0=" width="250">
</div>
감사를 사용해보십시오. 그건 내가 필요로하는 것이 아니지만 내 질문의 일부가되어야합니다. 우리가 편집에 대한 또 다른 대답을 얻지 못하면 나는 현상금을 줄 것이다! – caiocpricci2
"그게 내가 필요로하는 것이 아니다"- 정확히 * 무엇이 필요합니까? 이것은 유일한 해결책은 아닙니다. 예를 들어, (1) 동적으로 생성 된 이미지를 삭제하거나 이미 페이지의 일부인 이미지를 드롭하면 파일 선택기를 생략하거나 (2) "시뮬레이션 드롭"버튼을 브라우저 확장의 일부로 사용할 수 있습니다. – kol
사용자 상호 작용을 제거해야합니다. 내 시스템에서 다른 파일을 가져 오는 "파일"변수를 생성하고 샘플 피들과 같은 요소에서 "끌어서 놓기"할 수 있습니다. 꼭 이미지 일 필요는 없지만 이미지 만 할 수 있다면 이미 충분합니다. – caiocpricci2