Question

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

这是我的代码

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

图像应该去哪里

<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);
}

不要忘记检查文件是否是有效图像，我将其留给您。

使用jquery和文件上载表单字段

2 个答案: