使用上载图像和文本文件，然后在文档中显示它们
我想创建一个文件输入，您可以在其中选择图像，然后显示在特定的div中。我已经尝试了一些我见过的方法，并且过去做过这些但我不记得......我也想用文本文档来做到这一点，只显示没有iframe或任何内容的文本。使用<input type = file>上载图像和文本文件，然后在文档中显示它们
任何指针？
就这样你知道我想把本地文件，它只需要工作在铬。
$(document).ready(function(){
$('input.upload').on('change', addFile);
});
function addFile (event) {
var jqDisplay = $('div.myTarget');
var reader = new FileReader();
var selectedFile = event.target.files[0];
reader.onload = function (event) {
var imageSrc = event.target.result;
jqDisplay.html('<img src="' + imageSrc + '" alt="uploaded Image">');
};
reader.readAsDataURL(selectedFile);
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<div class="myTarget"></div>
<input type="file" class="upload">
</body>
</html>这不处理文本文件，它无用的解析文件路径，当File对象具有'name'属性，并且它使用FileReader时，当它不是必需的时候... – Kaiido
文件路径的解析是我的脚本的一个有用的旧部分，其中我复制了这部分代码。文本文件解析不是我的脚本中的目标。这里需要文件阅读器。 –
但是在这里你正在回答一个问题。对于这个问题，解析文件路径是没有用的。如果您需要该文件的名称，请检查其“name”属性。文本文件解析是这个问题的一个要求。您的脚本不需要FileReader，它只处理图像，请检查[我自己的答案]（http：// stackoverflow。com/a/43246085/3702797）我在那里解释一个人应该更喜欢URL.createObjectURL方法。 – Kaiido
嗯，这是基于处理上传，所以在angular2，我在使用typescript..Th输入类型的文件通过以下方式上传图片的JavaScript方法是这里的关键。
当我向他发送图像url以保存它时，src被一个属性绑定，该属性的值在服务器响应提供的返回的aws s3 url代码内设置。
的HTML： -
<div class="mt-10 fileUpload">
<label class="uploadBtnLabel bm-action-btn">
<input type="file" name="resourceFile" #uploadElem accept="image/*" (change)="uploadImage(submitElem)"/>
<input type = "submit" id="fileUpload" class="hidden" name="fileUpload" #submitElem (click)="store.postFileUpload(uploadElem, group)">
<span>Upload<i class=" pl-5 fa fa-upload"></i></span>
</label>
</div>
<img class="logoImage" [src]="group.controls['logoUrl'].value" *ngIf="group.controls['logoUrl'].value">
的打字稿功能相同的图像转换成dataUrl并将其发送到服务器。
//Function to upload local file
uploadImage(submitElem, renderer){
let event = new MouseEvent('click', {bubbles: false});
renderer.invokeElementMethod(
submitElem, 'dispatchEvent', [event]);
}
postFileUpload(inputValue, group){
this.readImage(inputValue, group);
}
readImage(inputValue: any, group): void {
if(inputValue) {
let image;
let self = this;
let accountId;
var file: File = inputValue.files[0];
var myReader: FileReader = new FileReader();
myReader.readAsDataURL(file)
myReader.onloadend = (e) => {
image = myReader.result.split(',')[1];
let postData = {
imageString: image
};
if(group.controls['accountId']) {
accountId = group.controls['accountId'].value;
}else{
accountId = self.mssId;
}
self.imageUploadSub = self.invoiceConfService.uploadImage(accountId, postData).subscribe(
(response) => {
group.controls['logoUrl'].setValue(response.data.logoUrl);
self.imageLink = response.data.logoUrl;
},
(error) => {
});
}
}
}
该死的看起来很复杂 –
我把它放进去，但看起来不正确。如果你在img部分中的HTML从src属性开始显示为白色，并且当我输入图像时什么也没有发生，除了html/javascript之外，我还需要什么？ –
您不需要使用FileReader来显示用户上传的文件。 readAsDataURL是相对广泛的。它迫使你将原始文件大小的130％直接保存在HTML标记中，因此，这意味着你的内存消耗大大增加。
相反，在处理用户上传的文件时，您应该始终更喜欢URL.createObjectURL方法。这将只存储用户系统上的文件的直接指针，并返回一个小的URI：内存影响几乎为空。
但是，你说你不想使用iframe，这是不幸的，因为它是可以从html页面显示文本文件的唯一元素之一。
因此，对于这种情况，您将不得不使用FileReader，但使用readAsText()方法。
因此，这里是一个天真的万能媒体播放器：
f.onchange = function(e) {
let file = this.files[0];
let elementType;
// this is really naïve, the MIME type means nothing and should not be trusted
let fileType = file.type.split('/')[0];
switch (fileType) {
// determine which element to create
case 'image': elementType = 'img'; break;
case 'video': elementType = 'video'; break;
case 'audio': elementType = 'audio'; break;
case 'text': // this one may break and should not be there
elementType = 'pre';
break;
default: // We'll use an iframe for unknow elements
elementType = 'iframe'; break;
}
let elem = document.createElement(elementType);
if (elementType !== 'pre') { // a real media
// not really needed here,
// but it's always good to revoke a blobURI when not needed anymore
elem.onload = e=> { URL.revokeObjectURL(elem.src) };
elem.src = URL.createObjectURL(file);
if(elementType === 'audio' || elementType === 'video'){
elem.controls = true;
}
} else {
// so we said we wanted to display text files inside the current document ...
let reader = new FileReader();
reader.onload = function() {
elem.textContent = reader.result;
};
reader.readAsText(file);
}
document.body.appendChild(elem);
}iframe {
border: none;
}<input type="file" id="f">
你需要检查'FileReader'和''readAsDataURL。这个答案有很好的例子，你可以如何使用它 - http://stackoverflow.com/questions/16430016/using-readasdataurl-for-image-preview –