(iframe实现)无刷新上传图片

Index.aspx 页面

<html>

<head>

<title>iframe实现无刷新上传图片</title>

</head>

<body>

<input id="photo" name="photo" type="text" style="display: none" />

<iframe id="upfile1" src="addimage/Addimg2.aspx?name=photo"
scrolling="no" frameborder="0"
width="150px" height="150px"></iframe>

</body>

</html>

Addimg2.aspx页面

<html xmlns="http://www.w3.org/1999/xhtml">
 <head
runat="server">
  <title></title>
<style
type="text/css">
 .hidden
 {
      display:
none;
  }
</style>
</head>
<body>

<form id="form1" runat="server">
<script
type="text/javascript">
function show() {

document.getElementById(‘Button1‘).click();
}

</script>

<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="上传" CssClass="hidden" />
<div>

<asp:Image ID="img1" runat="server" CssClass="notShow" Height="80"
ImageUrl="~/images/nopic.gif" />
</div>

<div>
<asp:FileUpload ID="FileUpload1"
onchange="show();" runat="server" Width="70" />
</div>

</form>
</body>
</html>

Addimg2.aspx.cs 页面

protected void Button1_Click(object sender, EventArgs e)
{

String savePath = @"~\Upload\image\";
savePath =
Server.MapPath(savePath);
if (!Directory.Exists(savePath))

{
Directory.CreateDirectory(savePath);
}
if
(FileUpload1.HasFile)
{
String filename;

filename = FileUpload1.FileName;
savePath += filename;

FileUpload1.SaveAs(savePath);
//相对路径
string
strUrl = UrlConvertor(savePath);
img1.ImageUrl = "~\\" +
strUrl;
//获取文件后缀名
//string fileException =
System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();//获取后缀名

//
将相对路径返回给父页面
//Response.Write(string.Format("<script>window.parent.form1.photo.value=‘{0}‘;</script>",
strUrl));
}
}

/// <summary>
/// 本地路径转换成URL相对路径
/// </summary>

/// <param name="strImagesUrl"></param>
///
<returns></returns>
private string UrlConvertor(string
strImagesUrl)
{
string tmpRootDir =
Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//获取程序根目录
string
imagesurl2 = strImagesUrl.Replace(tmpRootDir, ""); //转换成相对路径
imagesurl2 =
imagesurl2.Replace(@"\", @"/");
imagesurl2 = string.Format("/{0}",
imagesurl2);
return imagesurl2;
}

时间: 2024-11-08 15:38:04

(iframe实现)无刷新上传图片的相关文章

无刷新上传图片,ajax 和 iframe

iframe 上传 upload.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">

javascript 无刷新上传图片之原理

刚开始我认为可以像ajax 那样获取到数据然后通过ajax 发送请求,后来发现浏览器为了客户端的安全默认并没有给javascript 这个权限.这个方法当然是行不同了.我看了好像开源的上传图片原理,当然大部分是flash.但是为了方便使用js的也不少. 原理都是使用iframe 上传,在from标签里面有个属性 和a 标签一样 target,target标示这个表单的数据提交的目的地.网页特效代码target里面写iframe的name ,这样表单的数据就提交到了这个 iframe里面.根据这个

MVC无刷新上传图片并显示

@{ ViewBag.Title = "Home Page"; } <script src="../../Scripts/swfobject.js" type="text/javascript"></script> <script src="../../Scripts/jquery.uploadify.v2.1.4.js" type="text/javascript">&

JAVA servlet无刷新上传图片文件并裁剪demo代码(Jcrop)

原文:JAVA servlet无刷新上传图片文件并裁剪demo代码(Jcrop) 源代码下载地址:http://www.zuidaima.com/share/1550463770102784.htm sevlet写的demo,可直接运行.   

使用SWFUpload组件无刷新上传图片

使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET项目,所以本文着重讲解ASP.NET 的使用,个人感觉示例基本给的很清晰,参考文档进行开发,并非难事 0.     首先下载swfUpload 包,在下载的包中有samples文件夹,samples下有demos文件夹,打开demos文件夹可看到如下图所示结构 我们待会会用到的包括,swfuploa

表单无刷新上传图片

近期做有关上传图片的项目,发现都没有使用无刷新页面上传方式,都是通过传统的上传图片跳转然后显示图片,这对于上传多张图片就太不适用! 网上也有各种异步上传的插件 如 swfupload等比较庞大的插件,利用flash上传,顺带介绍一个比较简洁的ajax上传图片的插件ajaxFileUpload: 直接上地址:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 现在普通上传方式上改造一下,实现无刷新上传 通过隐藏ifram

iframe实现无刷新上传文件(转)

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. [1].[代码] [HTML]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html>   <body>      <form action="upload.jsp

Ajax 无刷新上传图片

如果用ajax直接传图片后台不好接受,所以最终还是要通过ajax来实现,原理很简单,触发form的submit()就可以了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <script src="js/jquery-1.4.4.min.js" type="text/

页面被iframe与无刷新更换url方法

页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ iframedRedirectSuccess: true }); window.top.location.href = addURLParam(window.self.location.href, 'data', data); } 页面初始化获取参数 import URL from 'url-parse