jquery 檔案base64 - 從JQuery中的文件輸入中獲取數據




4 Answers

你可以嘗試像這樣的FileReader API。

<!DOCTYPE html>
<html>
<head>
<script>        
  function handleFileSelect()
  {               
    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
      alert('The File APIs are not fully supported in this browser.');
      return;
    }   

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");               
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      //fr.readAsText(file);
      fr.readAsDataURL(file);
    }
  }

  function receivedText() {
    document.getElementById('editor').appendChild(document.createTextNode(fr.result));
  }           

</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();'>
<div id="editor"></div>
</body>
</html>
javascript to

我其實有一個文件輸入,我想檢索文件的Base64數據。

我試過了:

$('input#myInput')[0].files[0] 

檢索數據。 但它只提供名稱,長度,內容類型,但不提供數據本身。

實際上我需要這些數據將它們發送到Amazon S3

我已經測試了API,並且當我通過帶有編碼類型“multipart / form-data”的html格式發送數據時,它可以工作。

我使用這個插件: http://jasny.github.com/bootstrap/javascript.html#fileupload : http://jasny.github.com/bootstrap/javascript.html#fileupload

這個插件給了我一張圖片的預覽圖,並且在圖像預覽的src屬性中檢索數據。 但是,當我將這些數據發送到S3時,它不起作用。 我可能需要對數據進行編碼,比如“multipart / form-data”,但我不知道為什麼。

有沒有辦法在不使用html表單的情況下檢索這些數據?




我創建了一個表單數據對象並附加了該文件:

var form = new FormData(); 
form.append("video", $("#fileInput")[0].files[0]);

我得到了:

------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv

在發送的頭文件中。 我可以確認這是有效的,因為我的文件已發送並存儲在服務器上的文件夾中。 如果你不知道如何使用FormData對象,那麼有一些在線文檔,但不是很多。 表單數據對象由Mozilla進行分析




HTML:

<input type="file" name="input-file" id="input-file">

jQuery的:

var fileToUpload = $('#input-file').prop('files')[0];

我們只想得到第一個元素,因為prop('文件')返回數組。




 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

下載名為fileinput的上述文件,將路徑添加到您的索引頁面。

<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"       
 `enter code here`accept=".pdf" multiple>
</div>

<script>
        $("#uploadFile1").fileinput({
            autoReplace: true,
            maxFileCount: 5
        });
</script>



Related

jquery file file-upload base64 html-input