Question

我正在创建一个应用，我希望用户上传带有HTML5的图片<input type="file"/>

我知道由于安全性，浏览器会限制获取图像的路径，因此我无法复制图像路径并将其放在我想要的位置。

基本上我希望用户提交图像，我希望能够通过将图像设置为div的背景图像并将图像放在其他位置来操作图像。希望通过改变它的来源。这不是服务器端应用程序，因此PHP或任何服务器端语言都不是一个选项。

示例：如果用户单击某个按钮，则用户提交的图像可以设置为其他div的background-image: url('image-path')，并应用于其他图像标记。

Answer 1

没有在多个浏览器中进行过测试，但可以尝试这样的事情：

<input type="file" id="file">


$('#file').change(function(evt){
    var img = $('<img/>');
    var div = $('<div class="with-image"/>');
    $(document.body).append(img);
    $(document.body).append(div);

    var reader = new FileReader();
    reader.onload = (function(img) { 
        return function(ev) {
            var image = ev.target.result;
            img[0].src = image;
            div.css('background-image', 'url("' + image + '")');
        };
    })(img);

    var file = evt.target.files[0];
    reader.readAsDataURL(file);
});

这是a fiddle。

Answer 2

您可能希望使用新的File API来实现这一点，而这实际上是没有服务器的唯一方法。这是一个例子：

JSFiddle：http://jsfiddle.net/41w6f7n9/

;(function(window, undefined) {
  var 
    doc = window.document,
    userFile = doc.getElementById('userFile'),

    divPreviews = doc.querySelectorAll('.preview'),
    imgPreview = doc.getElementById('img-preview'),

    // We will read the file as a Data URL.
    fileReader = new FileReader();

  var fileutil = {
    init: function() {
      userFile.addEventListener('change', function(e) {
        fileutil.readFile(this.files[0]);  
      }, false);
    },

    readFile: function(file) {
      var self = this;

      // When done reading.
      fileReader.onload = function(e) {
        if (e.target.readyState === 2) { // 2 means DONE
          self.preview(e.target.result);
        }
      };

      // Start reading the file as a Data URL and wait to complete.
      fileReader.readAsDataURL(file);
    },

    preview: function(imageURL) {
      imgPreview.src = imageURL;

      divPreviews[0].style.backgroundImage = 'url('+imageURL+')';
      divPreviews[1].style.backgroundImage = 'url('+imageURL+')';
    }
  };

  fileutil.init();
}(this));

HTML：

<form>
  <input type="file" id="userFile">
</form>

<h1>Image Preview</h1>
<img src="" width="400" id="img-preview">

<h1>Div preview 1</h1>
<div id="preview1" class="preview"></div>

<h1>Div preview 2</h1>
<div id="preview2" class="preview"></div>

html5选择图像并进行操作

2 个答案: