Question

我需要一个代码，可以在我选择它后立即将图像从PC上传到我的网站，而无需点击提交或刷新页面。这是我到目前为止的代码！

        <img id="uploadPreviewprofile" style="max-width: 990px; max-height: 320px;text-align:center; position:absolute;" />
        <div class="fileUploadprofile btn btn-primary" style="position:absolute; margin-top:298px;">
            <form method="post" enctype="multipart/form-data">
                <input id="uploadImageprofile" type="file" name="fotoprofile" class="uploadprofile" onchange="PreviewImageprofile();" />

        </div>
    <script type="text/javascript">

        function PreviewImageprofile() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImageprofile").files[0]);

            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadPreviewprofile").src = oFREvent.target.result;
            };

        };
    </script>
</div>

Answer 1

阅读文件后，只需将其转到服务器，例如：

<强> HTML

<input id="instant" type="file">

<强>的JavaScript

// Note: I am using jQuery here, so you need to include the library

$("#instant").on("change", function() {
 $.each(this.files, function(index, file) {
  // read file data
  reader = new FileReader();
  reader.onload = function(event) {
   // send to server
   $.post("upload.php", {name: file.name, image: event.target.result});
  }
  reader.readAsDataURL(file);
 });
});

<强> PHP

<?php
 if($_POST["image"]) {
  // image is base64 encoded, so let's unparse it
  $parts = explode(",", $_POST["image"]);

  // check that we have the image
  if(isset($parts[1])) {
   // save the image
   file_put_contents($_POST["name"], base64_decode($parts[1]));
  }
 }

这就是魔法......

快速回顾：

1）我们通过标准文件上传标签

选择图像

2）我们使用AJAX Post

捕获将base64编码图像推送到服务器的更改

3）我们解析base64编码的图像（在数据URI方案中）并解码它的base64数据部分。这将为我们提供实际图像/文件中的二进制数据，以使用其原始名称保存到硬盘驱动器。

现在这段代码没有任何检查等。但它为您提供了继续工作的核心功能。

选中即时上传

1 个答案: