如何在用户从浏览器中选择文件后立即上传图片？
就像在 Facebook 中一样，当您需要上传封面或个人资料图片时，您需要 选择文件，然后开始上传。
我现在只有我的输入标签
<input id="chaf" type="file"/>
以及文件选取后可以运行该函数的js
$('#chaf').change(function(){
// Upload image start
});
但是我怎样才能以这种方式将数据发送到php？
【问题讨论】：
标签： javascript php jquery ajax image-uploading
您可以使用 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);
?>
【讨论】：
您应该查看：https://github.com/Widen/fine-uploader。 这正是你想要的。它将在他们选择图像的第二个开始上传。 它还支持拖放和多文件上传。
【讨论】：
另一种选择——使用IaaS进行文件上传，例如Uploadcare（这个系统由我们维护）：
您所要做的就是将 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 发送到您的服务器，因此您可以存储对它的引用。
【讨论】：