이미지를 서버에 업로드하기 전에 캔버스 안에 이미지를 표시하려고합니다. html 5에 대한 경험이 많지 않습니다. 누가 이것에 대한 해결책을 보여줄 수 있습니까 ??
<form action="#" method="POST" ecrtype="myltipart/form-data">
<button type="buttom" class="file-uploader">
<input class="img-fields" type="file" name="files[]" multiple >
<span>add files ...</span>
</button>
<input type="submit" name="upload" value="upload">
</form>
<canvas></canvas>
다음 접근 방식을 사용하면 이미지 를 업로드 하기 전에 미리 볼 수 있습니다 (100 % 클라이언트 측).
여기 있습니다 :
html :
<input type="file" id="fileInput" />
<div id="preview"></div>
자바 스크립트 :
document.getElementById('fileInput').addEventListener('change', function(){
var file = this.files[0];
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(file);
document.getElementById('preview').innerHTML = '<img src="' + blobURL + '" />';
});
도움이 되길 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다