jquery - 使用带有文件上传表单字段的 jquery

Question

如果没有某种服务器交互，我不确定这是可能的，但我希望它是用于原型设计的。我有一个文件上传表单字段。我希望用户能够从硬盘驱动器中选择图像，并且 jquery 会将该图像放入 DOM 中的 div 中。

这是我的代码

<div class="label">Upload Your Own Logo</div>
  <input name="upload" type="file" id="logo-upload">

图像应该去的div

<div class="user-logo">logo.png</div>

Answer 1

如果用户的浏览器有 HTML5 FileReader API，那么这是可能的：

var file = document.getElementById('logo-upload').files[0],
    reader = new FileReader();
reader.readAsDataURL(file);

reader.onloadend = function(e) {
    var image = $('<img>').attr('src',e.target.result);
    $(image).appendTo.('.user-logo');
}

Answer 2

你不需要 AJAX。事实上，你甚至不需要 jquery。

<input type="file" name="ss" id="fileUpload" onchange="dothis()"/>
<div id="picDiv"></div>

使用函数 dothis() 将您上传的图像附加到 #picDiv

function dothis()
{
    var oImg=document.createElement("img");
    oImg.setAttribute('src', document.getElementById("fileUpload").value);
    oImg.setAttribute('alt', 'na');
    document.getElementById("picDiv").appendChild(oImg);
}

不要忘记检查文件是否为有效图像，这由您决定。