由网友(社会水太深)分享简介：我有一个表格，它允许用户上传的照片。在用户已提交的形式，我想生成的前端的缩略图每个画面，然后将其存储在服务器上I have a form which allows the user to upload a picture.After the user has submitted the form, I'd lik...

我有一个表格，它允许用户上传的照片。 在用户已提交的形式，我想生成的前端的缩略图每个画面，然后将其存储在服务器上

I have a form which allows the user to upload a picture. After the user has submitted the form, I'd like to generate on the front-end a thumbnail for each picture and then store it on server.

有关安全原因，它不可能改变一个文件输入字段的值，所以我怎么能发送到服务器上的前端JS中产生了一些缩略图图像？

For security reason it's not possible to alter the value of a file input field, so how could I send to server some thumbnails images generated on the front-end in js?

是否有可能在前端生成之前提交表单中输入文件字段设置图像的缩略图？然后在同一时间提交两者兼而有之？

Is it possible on front-end to generate a thumbnail from the image set in the input file field before form submit? And then submitting both at same time?

推荐答案

更​​好的搜索后，在网上我找到了答案，我的问题。

After a better search online I found the answer to my question.

这是可以组合的画布连同文件API

尝试上载在下面的演示的任何图象，看到一个新产生的缩略图将出现在右侧的形式的

Try to upload any picture in the demo below and see that a new generated thumbnail will appear on the right side of the form.

演示： http://jsfiddle.net/a_incarnati/fua75hpv/

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

有一个很好的答案已经被DerekR给出了这个问题：

A good answer has been given by DerekR to this question:

如何上传图像到HTML5的画布