fileapi | 易学教程

HTML5 File API: How to see the result of readAsText()

阅读更多关于 HTML5 File API: How to see the result of readAsText()

问题 When readAsText() function is completed the result is stored in .result How do I see if the content of the file read are correct in .result ? fr = new FileReader(); fr.readAsText(file); var x = fr.result; console.log(x); //does not display anything on console Now how do I display the .result object to verify the the content? 回答1: readAsText is asynchronous, so you would need to use the onload callback to see the result. Try something like this, var fr = new FileReader(); fr.onload = function

Convert base64 png data to javascript file objects

阅读更多关于 Convert base64 png data to javascript file objects

I have two base64 encoded in PNG, and I need to compare them using Resemble.JS I think that the best way to do it is to convert the PNG 's into file objects using fileReader . How can I do it? You can create a Blob from your base64 data, and then read it asDataURL : var img_b64 = canvas.toDataURL('image/png'); var png = img_b64.split(',')[1]; var the_file = new Blob([window.atob(png)], {type: 'image/png', encoding: 'utf-8'}); var fr = new FileReader(); fr.onload = function ( oFREvent ) { var v = oFREvent.target.result.split(',')[1]; // encoding is messed up here, so we fix it v = atob(v); var

How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?

阅读更多关于 How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?

问题 This Question is related to and inspired by How to updoad in old browsers (ex Safari 5.1.4) Given an <input type="file"> element having a files property containing File objects which inherit from Blob , is it possible to create a ArrayBuffer and convert the ArrayBuffer to a data URI from a Blob or File object without using FileReader ? Approaches have tried so far have been create a mock WebSocket with .binaryType set to "arraybuffer" , create a MessageEvent with event.data set to File object

Fallback for FormData in IE 8/9

阅读更多关于 Fallback for FormData in IE 8/9

问题 FormData does not exist in IE 8/9 but I need that functionality in those browsers. Is there a nice fallback for this? I would try to send over json data, but I need to pass over a file to the server. I append this file to the formData in modern browsers and just submit an XHR request. Because FormData does not exist in IE 8/9 this obviously fails. // I cant seem to get this to work with a file. $.ajax({ url: '/genericHandlers/UploadDocsFile.ashx', type: "POST", data: model.toJSON(),

Getting Image Dimensions using Javascript File API

阅读更多关于 Getting Image Dimensions using Javascript File API

I require to generate a thumbnail of an image in my Web Application. I make use of the Html 5 File API to generate the thumbnail. I made use of the examples from the below URL to generate the thumbnails. http://www.html5rocks.com/en/tutorials/file/dndfiles/ I am successfully able to generate the thumbnails. The problem that I have is I am able to generate thumbnail only by using a static size. Is there a way to get the file dimensions from the selected file and then create the Image object? Yes, read the file as a data URL and pass that data URL to the src of an Image : http://jsfiddle.net

restrict file upload selection to specific types

阅读更多关于 restrict file upload selection to specific types

问题 Anyway to restrict the selection of file types via the <input type="file" /> element? For instance, if I wanted only images types to be uploaded, I would restrict the possible selections to (image/jpg,image/gif,image/png), and the selection dialog would grey out files of other mime types. p.s. I know that I can do this after the fact with the File API by scanning the .type attributes. I'm really trying to restrict this before hand.. I also know I can do this via flash, but I do NOT want to

Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

阅读更多关于 Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

Is there any way of reading the contents of a HTML Canvas as binary data? At the moment I've got the following HTML to show an input file and the canvas below it: <p><button id="myButton" type="button">Get Image Content</button></p> <p>Input:<input id="fileInput" type="file"/></p> <p>Canvas<canvas id="myCanvas" width="578" height="200"/></p> I've then setup my input file to set the canvas correctly which works fine: $('#fileInput').on('change', function() { $.each(this.files, function() { var image = new Image(); image.src = window.URL.createObjectURL(this); image.onload = function() { $(

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. 回答1: 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

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 =

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