Javascript 使用<；上载图像和文本文件；输入类型=文件>；然后在文档中显示它们

我想做一个文件输入，你可以选择一个图像，然后它显示在一个特定的分区。我已经尝试了一些方法，我见过，我在过去做过，但我不记得。。。我想用文本文档也这样做，只显示文本而不显示iframe或任何东西

有什么建议吗

正如你所知，我想输入本地文件，只需要在chrome中工作。

$（文档）.ready（函数（）{
$（'input.upload'）。on（'change'，addFile）；
});
函数addFile（事件）{
var jqDisplay=$（'div.myTarget'）；
var reader=new FileReader（）；
var selectedFile=event.target.files[0]；
reader.onload=函数（事件）{
var imageSrc=event.target.result；
jqDisplay.html（“”）；
};
reader.readAsDataURL（selectedFile）；
}

---

好吧，它是基于处理上传的javascript方法，因此在angular2中，我使用typescript以以下方式上传图像。输入类型文件是这里的关键

src由一个属性绑定，该属性的值在代码中设置，返回的aws s3 url由服务器响应提供，当我向他发送图像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">

---

您不需要使用文件阅读器来显示用户上载的文件。

readAsDataURL

是相对扩展的。它迫使您将原始文件大小的130%直接保留在HTML标记中，因此，它代表了内存消耗的大幅增加

相反，在处理用户上传的文件时，您应该始终选择这种方法。这将只在用户系统上存储指向该文件的直接指针，并返回一个小URI：内存影响几乎为空

但是，您声明不想使用iFrame，这很不幸，因为它是唯一可以显示html页面中文本文件的元素之一。
因此，在这种情况下，您必须使用文件读取器，但要使用

readAsText（）

方法

这是一款天真的通用媒体播放器：

f.onchange=函数（e）{
让file=this.files[0]；
让元素类型；
//这真的很幼稚，MIME类型没有任何意义，不应该被信任
让fileType=file.type.split（'/'）[0]；
开关（文件类型）{
//确定要创建的元素
大小写“image”：elementType=“img”；break；
案例“video”：elementType=“video”；break；
case'audio'：elementType='audio'；break；
case'text'：//这个可能会断开，不应该在那里
elementType='pre'；
打破
默认值：//我们将对未知元素使用iframe
elementType='iframe'；break；
}
让elem=document.createElement（elementType）；
如果（elementType！=='pre'）{//一个真正的媒体
//这里真的不需要，
//但当不再需要时撤销blobURI总是好的
elem.onload=e=>{URL.revokeObjectURL（elem.src）}；
elem.src=URL.createObjectURL（文件）；
如果（elementType==='audio'| | elementType==='video'）{
元素控制=真；
}
}否则{
//所以我们说我们想在当前文档中显示文本文件。。。
let reader=new FileReader（）；
reader.onload=函数（）{
elem.textContent=reader.result；
};
reader.readAsText（文件）；
}
文件.正文.附件（elem）；
}

iframe{
边界：无；
}

---

您需要检查

文件阅读器

和

读取数据URL

。这个答案有一个很好的例子，你可以使用它-该死的，看起来很复杂，我把它放进去，但它看起来不正确。从src属性开始，img部分中的HTML显示为白色，当我输入图像时，除了HTML/javascript之外，什么都不会发生？这不处理文本文件，它对文件路径进行无用的解析，当文件对象具有

名称

属性，并且使用文件读取器时，当不需要的时候…对文件路径的解析是我脚本中一个有用的老部分，我复制了这部分代码。文本文件解析在我的脚本中不是目标。这里需要文件读取器。但这里您要回答一个问题。对文件路径的解析对于这个问题是无用的。如果需要文件名，请检查其

name

属性。文本文件解析是问题的一个要求。您的脚本中不需要FileReader，因为它只处理图像，请检查我在哪里解释应该更喜欢URL.createObjectURL方法。

//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) => {
          });
      }
    }
  }