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); 

?>

Answer 2

你应该看看：https://github.com/Widen/fine-uploader。这完全符合你的要求。它将开始上传他们选择图像的第二个。它还支持阻力和阻力。删除和多个文件上传。

Answer 3

另一种选择 - 使用 IaaS进行文件上传，例如Uploadcare（此系统由我们维护）：

https://uploadcare.com

您所要做的就是将JS库添加到标题中：

<script>
    UPLOADCARE_PUBLIC_KEY = 'PUBLIC-KEY';
    UPLOADCARE_AUTOSTORE = true;
</script>
<script charset="utf-8" src="https://ucarecdn.com/widget/1.4.6/uploadcare/uploadcare-1.4.6.min.js"></script>

并用表格中特别标记的隐藏输入替换文件输入：

<input type="hidden" role="uploadcare-uploader" name="file_fieldname" />

它会向页面添加一个小部件。选择文件后（从本地驱动器，URL，Dropbox / Box / GoogleDrive / Facebook / Instagram等）或放入小部件，将立即开始上传。

表单会将上传文件的UUID发送到您的服务器，因此您可以存储对它的引用。

选择文件后立即上传图像

3 个答案: