日期:2014-05-18  浏览次数:20581 次

关于图片上传预览的逻辑问题

//用来预览图片的
<img id="preview" runat="server" src="../images/logo.gif" alt="pic" width="200" height="200" />
//用来显示图片文件名
<input type="text" runat="server" id="showFilePath" readonly="readonly" />

//文件上传控件
<style type="text/css">
.fileStyle{display:none;} //隐藏
</style>
<asp:FileUpload runat="server" ID="upLoadImg" onchange="ShowImg(this)" CssClass="fileStyle" />

function ShowImg(thisId) {
  document.getElementById('showFilePath').value = thisId.value;
  document.getElementById("upLoadBtn").click();
}

//一个button控件()
<input type="button" value="选择图片" id="upLoadImgBtn" runat="server" onclick="javascript:document.getElementById('upLoadImg').click();" />

1.当点击选择图片时,就相当与点击了文件上传控件
2.当文件上传的值改变时,就会触发onchange事件document.getElementById("upLoadBtn").click();
3.当onchange事件触发时,也点击了上传按钮
<asp:Button ID="upLoadBtn" runat="server" Text="上传" OnClick="upLoadBtn_Click" CssClass="fileStyle" />
//后台单击事件代码
  protected void upLoadBtn_Click(object sender, EventArgs e)
  {
  upLoadImg.SaveAs(Server.MapPath("../upLoadImage/" + upLoadImg.FileName));//上传图片到服务器
  preview.Src = "../upLoadImage/" + upLoadImg.FileName; //显示图片
  showFilePath.Value = upLoadImg.FileName; //显示图片名  
  }
到此为止,图片就可以显示出来了
问题是,如果一直预览图片,那就一直上传到服务器中,占资源
要的效果是,要是不提交到数据库,就得换一张图片时,删除前一张图片
————————————————————————————————————————————
我想过用js调用后台的办法,可是总不成功





------解决方案--------------------
当客户端选择图片的时候,没提交前把img的src指向客户端电脑上的图片物理路径,不要存到服务器.
等客户端确认保存了,在提交给服务器
------解决方案--------------------
把img的src指向客户端电脑上的图片物理路径,不要存到服务器.
等客户端确认保存了,在提交给服务器
------解决方案--------------------
http://www.update8.com/Effects/Pic/23943.html
这里有JS方法