Question

我想创建一个文件输入，您可以在其中选择图像，然后在特定的div中显示。我已经尝试了一些我已经看过的方法，过去我做过这个但是我不记得了......我也希望用文本文档来做，只显示文本没有iframe或任何东西。

任何指针？

您知道我想要放入本地文件，只需要使用chrome。

Answer 1

＆＃13;

$(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); 
    }

＆＃13;

<!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>

＆＃13;

Answer 2

好吧，它是基于处理上传的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">

用于将图像转换为dataUrl并将其发送到服务器的typescript函数。

//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方法。这只会存储指向用户系统上文件的直接指针，并返回一个小URI：内存影响几乎为null。

但是，你说过你不想使用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”/>上传图像和文本文件，然后在文档中显示它们

3 个答案: