Question

我已经尝试过使用很多示例，但似乎没有任何东西只使用HTML和Javascript / jQuery。这是我到目前为止所尝试的内容：

我上传页面的页面代码：

＆＃13;

    <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>

＆＃13;

将收到文件的页面代码：

＆＃13;

    <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>

＆＃13;

这是收到文件的页面的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

由于您从一个页面移动到另一个页面，我们无法按照自己的喜好（网络消息传递）进行操作。

您正在使用readAsDataURL，它会给您一个字符串，因此您可以将其存储在localStorage或sessionStorage中：

// In `imageIsLoaded`
localStorage.theImage = e.target.result;

...然后在另一页加载它：

someImage.src = localStorage.theImage;

请注意，网络存储和数据网址都有大小限制，但如果您不处理千兆字节大小的图片，则应该没问题。（IE8将数据URL限制为32k，但IE8不支持您用于读取图像的File API，因此......）。

请参阅autorealod关于可选的使用IndexedDB（如果可用）（如果没有则回退到本地存储），通过localForage库。

Answer 2

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

不要在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相同的保护。

Answer 3

您可以将图片存储在cookie或localStorage;

中

您可以通过以下方式存储在Cookie中。

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);
            $.cookie("image", this.files[0]);
        }
    });
}

function imageIsLoaded(e) {
   $('#myImg').attr('src', $.cookie("image"));
};

localStorage以下列方式。

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);
            // Store
localStorage.setItem("image", this.files[0]);
        }
    });
}

function imageIsLoaded(e) {
   $('#myImg').attr('src', localStorage.getItem("image"));
};

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

3 个答案: