javascript - 是否可以将图像文件从一个 HTML 页面传递到另一页面？

Question

我已经使用许多示例进行了尝试，但仅使用 HTML 和 Javascript/jQuery 似乎没有任何效果。这是我到目前为止所尝试过的:

我上传页面的页面代码:

    <form name="formSale" action="dress-preview.html" method="get">
        <div class="form-group upload third file-wrapper">
	        <label for="uploadDress">Upload image:</label>
		    <div class="file-upload">
			    <span>Choose an image</span>
			    <input type="file" name="uploadDress" id="uploadFile" required>
		    </div>
       </div>
 </form>

接收文件的页面代码:

    <div class="image-preview">
		<div class="image">
			<img id="myImg" src="#" alt="">
			<div class="file-upload">
				<span>Elige una foto</span>
				<input type="file" name="uploadDress" id="uploadFile" required>
			</div>
		</div>
</div>

这是接收文件的页面的 Javascript

window.onload = function(){ 
    var url = document.location.href, params = url.split('?')[1].split('&'), data = {}, tmp, tmp1 = [];

    for(var i = 0, l = params.length; i < l; i++){
       var j = i + 1;
       tmp = params[i].split("=");
       tmp1.push(tmp);
       data[tmp[0]] = tmp[1];
    }

   img_load(tmp1[0][1]);
}

function img_load(img){
    $(":file").change(function(){
        console.log(true);
        if(this.files && this.files[0]){
            console.log(true);
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
}

function imageIsLoaded(e) {
   $('#myImg').attr('src', e.target.result);
};

有什么方法可以使用 Javascript/jQuery 传递图像 一个 HTML 页面到另一个页面？或者这是我只能做的事情 服务器方式(又名 PHP)

我想提到的另一件事是，在第二个 HTML 页面中，包含图像预览的 div 不在表单内。

Answer 1

^{犹豫是否仅将其作为评论的一部分，但是...}

不要将二进制文件存储在 localStorage 中。(甚至更少存储在 cookie 中...)这不是为此目的。 localStorage 相当慢，而且都是同步的。它的存储容量也非常有限。

相反，请使用 IndexedDB ，它提供了性能更高的 API(尽管使用起来要复杂得多)，并且可以直接存储二进制文件。

使用Mozilla's localForage库，它变得如此简单:

function store() {
  localforage.setItem('myfile', f.files[0])
    .then(onfilesaved);
}

function getFile() {
  localforage.getItem('myfile')
    .then(useTheFile);
}

Here is a fiddle由于 StackSnippet 不允许访问 localStorage 或 IndexedDB，因此证明了这一点。

请注意，IndexedDB 在跨源请求方面提供与 localStorage 相同的保护。