Javascript 如何在输入类型中添加图像后生成缩略图="；文件"；并在同一表格中提交

我有一个表单，允许用户上传图片。 用户提交表单后，我希望在前端为每张图片生成一个缩略图，然后将其存储在服务器上

出于安全原因，无法更改文件输入字段的值，因此如何向服务器发送一些在js前端生成的缩略图图像

---

在表单提交之前，前端是否可以从输入文件字段中设置的图像生成缩略图？然后同时提交两者？

经过更好的在线搜索，我找到了问题的答案

可以将画布与文件API组合在一起

尝试上传下面演示中的任何图片，并看到新生成的缩略图将出现在表单的右侧

演示：

DerekR对这个问题给出了一个很好的答案：

我找到了。它只创建一个

img

元素，并使用fileReader对象将其源属性指定为表单输入的值

函数预览文件（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
preview.src=“”；
}
}

TL；博士：

由于我想通过API上传图像并显示图像预览（这两件事实际上彼此很相配），我想到了以下方法：

（函数（角度）{
有棱角的
.module（'应用程序'）
.directive（'inputFilePreview'，[function（）{
var画布、mapToModel、elementScope；
/**
*要在加载映像时激发
*/
var imageOnLoad=函数（）{
canvas.width=this.width；
canvas.height=this.height；
canvas.getContext（“2d”）.drawImage（这个，0,0）；
};
/**
*在文件读取器加载后激发
*@param loadEvent{{}
*/
var readerOnLoad=函数（loadEvent）{
var img=新图像（）；
img.onload=图像onload；
img.src=loadEvent.target.result；
if（mapToModel）{
setModelValue（elementScope、mapToModel、img.src）；
}
};
/**
*这允许我们在元素范围内设置模型的值（如果
*模型是一个对象）
*@param scope{{}
*@param modelReference{string}
*@param值{*}
*/
var setModelValue=函数（范围、模型引用、值）{
//如果模型引用引用对象的属性（例如“object.property”）
if（~modelReference.indexOf（'.'））{
var parts=modelReference.split（'.'，2）；
//仅当该对象已存在时才设置该值
if（scope.hasOwnProperty（parts[0]））{
范围[部分[0]][部分[1]]=值；
返回；
}
}
范围[modelReference]=值；
};
/**
*我们指令的逻辑
*@param scope{{}
*@param元素{{}
*@param属性{{}
*/
var link=函数（范围、元素、属性）{
元素范围=范围；
canvas=document.getElementById（attributes.inputFilePreview）；
if（attributes.hasOwnProperty（'mapToModel'））{
mapToModel=attributes.mapToModel；
}
元素.on（'change'，函数（changevent）{
var reader=new FileReader（）；
reader.onload=readerOnLoad；
reader.readAsDataURL（changevent.target.files[0]）；
});
};
返回{
限制：“A”，
链接：链接
};
}]);
})（角度）；

预览工作所需的两个元素是：

<canvas id="image-preview"></canvas>
<input type="file" data-input-file-preview="image-preview" data-map-to-model="image.file" />

画布{
最大高度：300px；
最大宽度：300px；
}

{{sentData}}

认为可能值得添加一个更现代的答案和引用

---

您可以在输入元素上添加“更改”的事件侦听器，然后通过

this.files

（如MDN示例所示）访问文件列表来显示选定图像的缩略图。这是我最近的一个实现。uploadWatermark是在Allesandro所写内容的基础上构建的一个更加实用的东西

该函数从文件API中获取一个文件，并尝试将其放入边界框中，同时保留纵横比。不会绘制任何内容，但会返回一个

Promise

，它会吐出生成的数据URL

//在边界框内创建缩略图（宽x高）
generateThumbnail（文件、边界框）{
如果（！boundBox | | boundBox.length！=2）{
抛出“你需要给出边界框”
}
var scaleRatio=Math.min（…boundBox）/Math.max（file.width，file.height）
var reader=new FileReader（）；
var canvas=document.createElement（“画布”）
var ctx=canvas.getContext（'2d'）；
返回新承诺（（解决、拒绝）=>{
reader.onload=函数（事件）{
var img=新图像（）；
img.onload=函数（）{
var scaleRatio=Math.min（…boundBox）/Math.max（img.width，img.height）
设w=img.widt
<canvas id="image-preview"></canvas>
<input type="file" data-input-file-preview="image-preview" data-map-to-model="image.file" />

generateThumbnail(file, [300, 300]).then(function(dataUrl){
    console.log(dataUrl)
})