Javascript-how to upload images on mobile terminals ?, What is the size of the image before uploading?

How can I upload images on a mobile device ?, What is the size of the image before uploading? How can I upload images on a mobile device ?, What is the size of the image before uploading?

Reply content:

How can I upload images on a mobile device ?, What is the size of the image before uploading?

1. For asynchronous Upload, if you still want to use the file direct Upload method, you can use the HTML5FormDataFor more information, see this blog. Http://www.cnblogs.com/lhb25...

2. I have another way to upload images asynchronously. First, convert the image to a base64 string, and then submit the base64 string to the server. after receiving the string, the server can use a specific API to convert the base64 string to the image content. The specific implementation methods are as follows:

var getObjectURL = function(file) {        var url = null;           if (window.createObjectURL !== undefined) { // basic              url = window.createObjectURL(file);          } else if (window.URL !== undefined) { // mozilla(firefox)              url = window.URL.createObjectURL(file);          } else if (window.webkitURL !== undefined) { // webkit or chrome              url = window.webkitURL.createObjectURL(file);          }          return url;    }

getObjectURLThis method is used to convert an image file object in input into a temporary url in the same domain.

var converImgTobase64 = function(url, callback, outputFormat) {        var canvas = document.createElement('CANVAS'),        ctx = canvas.getContext('2d'),            img = new Image;        img.crossOrigin = 'Anonymous';        img.onload = function(){            canvas.height = img.height;            canvas.width = img.width;            ctx.drawImage(img,0,0);            var dataURL = canvas.toDataURL(outputFormat || 'image/png');            callback.call(this, dataURL);            canvas = null;         };        img.src = url;    }

converImgTobase64The method is to pass in the url obtained above and convert it to a base64 string through canvasAPI. Note that the url must be of the same domain and cannot be cross-domain.getObjectURLThis method is necessary.

Example:

Var input = $ ("input [type = file]") [0], src = getObjectURL (input. files [0]); converImgTobase64 (src, function (base64Str) {// process base64Str-related callback, where ajax requests can be sent directly .});

The code of this part of the component is in my util Library. please refer to and propose rectification comments ~~~ Https://github.com/zero-mo/Br...

In addition, if the image is compressed, one of them is based oncanvasYou can try it.
Http://www.cnblogs.com/xiao-y...

Reference my previous answers below

If compatibility is not consideredIEAvailableFileReader APIRead the file to obtain the fileBase64Value
imgLabels can be used directly.Base64Display images
You can use some plug-ins to crop images and upload them to the server for storage.

FileReader API reference:Https://developer.mozilla.org...
JQuery Image cropping plug-in (supports mobile terminals ):Http://www.jq22.com/jquery-in...

For compression, the size of the cropped image is much smaller than that of the source image.

Original problem address: https://segmentfault.com/q/10...

The newly written article:
Https://segmentfault.com/a/11...
It is mainly to use the native HTML5 file form selection, then use the plug-in compression, and finally directly use the FormData output by the plug-in to upload.