如何使用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在本地存儲中存儲配置文件圖像

回答

相關問題