fileapi | 易学教程

How can I draw an image from the HTML5 File API on Canvas?

阅读更多关于 How can I draw an image from the HTML5 File API on Canvas?

I would like to draw an image opened with the HTML5 File API on a canvas. In the handleFiles(e) method, I can access the File with e.target.files[0] but I can't draw that image directly using drawImage . How do I draw an image from the File API on HTML5 canvas? Here is the code I have used: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script> window.onload = function() { var input = document.getElementById('input'); input.addEventListener('change', handleFiles); } function handleFiles(e) { var ctx = document.getElementById('canvas').getContext('2d'); ctx.drawImage(e.target.files[0],

How to detect browser support File API drag n drop

阅读更多关于 How to detect browser support File API drag n drop

问题 I like to add a background on a div only for browsers which support drag & drop for files I don't like to use modernizr though, just a one line script 回答1: Why not just copy required parts from Modernizr? var isEventSupported = (function() { var TAGNAMES = { 'select': 'input', 'change': 'input', 'submit': 'form', 'reset': 'form', 'error': 'img', 'load': 'img', 'abort': 'img' }; function isEventSupported( eventName, element ) { element = element || document.createElement(TAGNAMES[eventName] ||

What is the max number of files to select in an HTML5 [multiple] file input?

阅读更多关于 What is the max number of files to select in an HTML5 [multiple] file input?

I have 64000 small images I want to upload to my website (using existing validation, so no FTP etc). I've created an HTML5 [multiple] type=file input for this a while back to be used for a hundred or hundreds of images. Hundreds is not a problem. The images are batched and sent to the server. But when I select a folder of ~ 16000 images, the file input's FileList is empty... The onchange event triggers, but the file list is empty. The browser (or file system or OS?) seems to have a problem selecting this many files. I've created a very small tool to help determine what could be the max: http:/

Adding UTF-8 BOM to string/Blob

阅读更多关于 Adding UTF-8 BOM to string/Blob

I need to add a UTF-8 byte-order-mark to generated text data on client side. How do I do that? Using new Blob(['\xEF\xBB\xBF' + content]) yields 'ï»¿"my data"' , of course. Neither did '\uBBEF\x22BF' work (with '\x22' == '"' being the next character in content ). Is it possible to prepend the UTF-8 BOM in JavaScript to a generated text? Yes, I really do need the UTF-8 BOM in this case. Erik Töyrä Silfverswärd Prepend \ufeff to the string. See http://msdn.microsoft.com/en-us/library/ie/2yfce773(v=vs.94).aspx See discussion between @jeff-fischer and @casey for details on UTF-8 and UTF-16 and the

file input size issue in safari for multiple file selection

阅读更多关于 file input size issue in safari for multiple file selection

问题 I am experiencing inconsistencies with regard to multiple file upload in Safari 5.1 on Windows Vista (haven't tried other platforms). The input element has the multiple flag to allow selection of multiple files. The problem occurs when the user does actually select more then one file. In this case, each File has a size attribute of 0 . If (still with the multiple flag), the user only chooses one file, the size attribute correctly contains the file size. The problem can be seen in the

Instantiate File object in Microsoft Edge

阅读更多关于 Instantiate File object in Microsoft Edge

问题 I'm trying to create an image file from a blob-object using the File API and then add it to a form to be sent via XHR. Works like a charm in chrome, but crashes the app in Microsoft Edge. let file = new File([blobContent], "image.png"); let form = new FormData(); form.append("file", file); Are there any alternatives to the File API or workarounds to attach a file to the form? If I just add the blob to the form it's not recognized as an image. Thanks! 回答1: Currently IE11, and Edge support the

How to convert dataURL to file object in javascript?

阅读更多关于 How to convert dataURL to file object in javascript?

I need to convert a dataURL to a File object in Javascript in order to send it over using AJAX. Is it possible? If yes, please tell me how. Matthew Caruana Galizia If you need to send it over ajax, then there's no need to use a File object, only Blob and FormData objects are needed. As I sidenote, why don't you just send the base64 string to the server over ajax and convert it to binary server-side, using PHP's base64_decode for example? Anyway, the standard-compliant code from this answer works in Chrome 13 and WebKit nightlies: function dataURItoBlob(dataURI) { // convert base64 to raw

Writing file to desktop using HTML5 FileSystem API

阅读更多关于 Writing file to desktop using HTML5 FileSystem API

I'm playing around a bit with the FileSystem API . I've found a lot of examples where you generate a download link and let the user download the file the "browser way". I would like to know two things: Is there any way to write the ajax result in the fiddle as a file directly to the disk (without any type of prompt). Like to the user's desktop for example. Is blob the most suitable format for this? http://jsfiddle.net/FBGDe/ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ console.log(this.response, typeof this.response); var

HTML5 File API crashes Chrome when using readAsDataURL to load a selected image

阅读更多关于 HTML5 File API crashes Chrome when using readAsDataURL to load a selected image

问题 Here's my sample code: var input = document.createElement('input'); input.type = 'file'; document.body.appendChild(input); input.addEventListener('change', function(){ var file = input.files[0]; var reader = new FileReader(); reader.onload = function(e){ var image = new Image(); image.src = e.target.result; }; reader.readAsDataURL(file); }); Load the page, select a large image (I'm using a 2.9MB 4288x3216 image). Refresh the page and select the same image. Result? The tab crashes! (Aw, Snap!)

encode/decode image with base64 breaks image

阅读更多关于 encode/decode image with base64 breaks image

问题 I am trying to encode and decode an image. I am using the FileReader's readAsDataURL method to convert the image to base64. Then to convert it back I have tried using readAsBinaryString() and atob() with no luck. Is there another way to persist images without base64 encoding them? readAsBinaryString() Starts reading the contents of the specified Blob, which may be a File. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called.