Question

我尝试使用jquery在本地存储中上传和存储配置文件图像（用于一个演示目的）。我刚刚上传了部分，并且不知道如何将该图像存储在本地存储中。请检查此fiddle并帮我解决此问题。感谢。

 function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#bannerImg').attr('src', reader.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$(".file-upload").change(function() {
  readURL(this);
});

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});

Answer 1

您不能仅使用Jquery上传文件，您至少需要php功能（在Web服务器上运行）才能将它们上传到您的本地目录。

首先，您需要在html代码的输入中添加和id属性：

<input class="file-upload" type="file" id="file" accept="image/*" />

然后，在readURL下面添加此功能：

$(".file-upload").change(function() {
 readURL(this);
 var input = document.getElementById("file");
 file = input.files[0];
 if(file != undefined){
   formData= new FormData();
   if(!!file.type.match(/image.*/)){
     formData.append("image", file);
     $.ajax({
       url: "upload.php",
       type: "POST",
       data: formData,
       processData: false,
       contentType: false,
       success: function(data){
           alert('success');
       }
     });
   }else{
     alert('Not a valid image!');
   }
 }else{
   alert('Input something!');
 }
});

然后，创建另一个文件，比如upload.php

<?php
$dir = "your local storage directory";
move_uploaded_file($_FILES["image"]["tmp_name"], $dir. $_FILES["image"]["name"]);
?>

您还可以阅读this article以便更好地理解。

如何使用Jquery将配置文件映像存储在本地存储中

1 个答案: