如何从数组中的表单获取照片完整的 url答案

【问题标题】：how to get photo compleet url form form in array如何从数组中的表单获取照片完整的 url
【发布时间】：2014-07-04 13:44:22
【问题描述】：

我正在尝试使用 jquery 通过表单从我的 comp 中拍照。
- 所以我希望整个 URL 脱离数组的形式

它在 Dreamweaver 中有效 + / -，但在资源管理器浏览器中无效，甚至在 chrome 中也无效

最终目标是为残障人士提供带有图片/应用程序的日历，但只要我能通过电话间隙

var foto= new Array();
var i=-1;
//foto=["toets.png"]; 
$('#fotouit').append("FOTO UIT");       
$('#knop01').click(function(){
  $('input:file[name=foto]').each(function(){
    //alert($(this).val());
    foto.push($(this).val());
    foto.forEach( function(){
      i++;
      $('#fotouit').append(foto[i]); 
      $('#fotouit').append('<img src=" '+ foto[i] + ' " width="100" height="100" />');
    });
  });
})

【问题讨论】：

标签： javascript jquery html photo picker

【解决方案1】：

我认为不可能在您计算机的本地文件系统中获取图片的 URL，但是您可以使用 Javascript 的 FileReader API 来读取上传文件的内容（在您的情况下是图片）。读取的内容可以在img 元素的src 中使用，就像您在示例代码中所做的那样。

【讨论】：

【解决方案2】：

这是对您要完成的工作的深入解释：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

示例：

function handleFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;

        if (!file.type.match(imageType)) {
            continue;
        }

        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        preview.appendChild(img); // Assuming that "preview" is a the div output where the content will be displayed.

        var reader = new FileReader();
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        reader.readAsDataURL(file);
    }
}

注意：

您可以在文件输入上使用 multiple 属性，以允许通过一个输入选择多个文件
您可以使用文件输入更改事件来立即捕获文件，而不是提供第二个按钮来单击

【讨论】：