javascript - 选择文件后立即上传图像

Question

如何在用户从浏览器中选择文件后立即上传图片？

就像在 Facebook 中一样，当您需要上传封面或个人资料图片时，您需要选择文件，然后开始上传。

我现在只有我的输入标签

<input id="chaf" type="file"/>

和选择文件后可以运行函数的js

$('#chaf').change(function(){
    // Upload image start
});

但是我怎样才能通过这种方式将数据发送到php呢？

Answer 1

您可以使用 Ajax(无需刷新)将文件作为 Base64 字符串上传。像这样的事情。

$(document).on("change", ".custom-file-input", this, function(e){       
   GetBase64( e.target );
});

function GetBase64( input ) {
   if ( input.files && input.files[0] ) {
      var FR= new FileReader();
      FR.onload = function(e) {
         var str = e.target.result;
         /* preview it ( if you wanted to ) */
         $('#preview-img').attr( "src", str );
         /* upload it to server */
         UploadFile(  str );
      };       
      FR.readAsDataURL( input.files[0] );
   }
}

function UploadFile( file_str ) {
   console.log( file_str );
   /* use $.ajax to upload your file */
}

请参阅此答案以将 base64 存储在磁盘中 base64 string to an image file

在 php 中是这样的

<?php

$base64Str = $_REQUEST[ "your-post-variable" ];
$img = explode(',', $base64Str);

$fp = fopen( "my-image.png" , "wb"); 
fwrite($fp, base64_decode( $img[1]) ); 
fclose($fp); 

?>