如何使用jquery在本地存储中存储配置文件图像

我想使用jquery将本地存储配置文件图像上传和存储（为了一个演示目的）。我只是上传部分，不知道如何将该图像存储在本地存储中。请检查这fiddle并帮助我解决这个问题。谢谢。如何使用jquery在本地存储中存储配置文件图像

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

来源

2017-05-07 ilmk

图像转换为base64可能会帮助你，http://stackoverflow.com/questions/19017401/how-to-store-and-retrieve-image-to-localstorage – M98

将文件保存为base64并从localstorage载入它.hope这会帮助你。
https://jsfiddle.net/RemyaJ/f9wfftft/4/

if(localStorage.img) { 
    $('#bannerImg').attr('src', localStorage.img); 
    } 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

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

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

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

来源

2017-05-07 06:20:06 RemyaJ

真棒！这正是我需要的。谢谢你的帮助！！ – ilmk

你不能只用jquery上传文件，你至少需要php函数（运行在web服务器上）将它们上传到你的本地目录。

第一件事，第一，你需要id属性在HTML代码添加和你输入：

<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 b了解。

来源

2017-05-07 05:52:34

如何使用jquery在本地存储中存储配置文件图像

回答

相关问题