使用 <input type=file> 上传图像和文本文件，然后在文档中显示它们

Question

我想制作一个文件输入，您可以在其中输入 select 图像，然后它会显示在特定的 div 中。我已经尝试了一些我见过的方法并且我过去也这样做过但我不记得......我也想用文本文档来做，只是显示没有 iframe 或任何东西的文本。

有什么指点吗？

只是想让你知道我想放入本地文件，它只需要在 chrome 中工作。

Answer 1

$(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>

Answer 2

嗯，它是基于javascript处理上传的方法，所以在angular2中，我使用打字稿按以下方式上传图像。输入类型文件是这里的关键。

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

typescript 函数同样将图像转换为 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) => {
          });
      }
    }
  }

Answer 3

您不需要使用 FileReader 来显示用户上传的文件。
readAsDataURL 比较宽泛。它会强制您直接在 HTML 标记中保留原始文件大小的 130%，因此，它会大大增加您的内存消耗。

相反，在处理用户上传的文件时，您应该始终首选 URL.createObjectURL 方法。这只会存储指向用户系统上文件的直接指针，以及 returns 一个小 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">

使用 <input type=file> 上传图像和文本文件，然后在文档中显示它们

Upload Images and Text Files using <input type=file> then showing them within document

html

javascript

local