zoukankan      html  css  js  c++  java
  • iframe无刷新异步上传

    前台页面 代码 

    代码
    1 <form id="form1" runat="server" enctype="multipart/form-data">
    2 <asp:HiddenField ID="hf" runat="server" />
    3 <!--隐藏的iframe来接受表单提交的信息-->
    4 <iframe name="hd" style="display: none;"></iframe>
    5 <div id="screenshot" style="display: block; background-color: #FFFF99; position: absolute;
    6   350px; left: 8px; bottom: 137px; border: 1px; border-color: Gray; border-style: solid;
    7 z-index: 1;">
    8   <input type="file" id="file1" name="upfile" size="28" />
    9 <input type="button" value="发 送" onclick="return SendFile('company/2/','file1','u','mag')" />
    10 <input type="button" value="删 除 " onclick="return SendFile('company/2/','','d','mag')" />
    11 </div>
    12 <asp:Image ID="mag" runat="server" Width="200" Height="250" ImageUrl="~/Image/fbz.jpg" />
    13 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" OnClientClick="return rea()" />
    14 </form>
    15
    16

     js代码

        <script src="jquery-1.3.2.js" type="text/javascript"></script>

    代码
    1 <script type="text/javascript" language="javascript">
    2 //检查是否选择文件
    3   function UpdateMsddg(newfilename, filename, ImageName) {
    4 //此函数用来提供给提交到的页面如upload.ashx输出js的回调,更新当前页面的信息
    5   if (newfilename == "") {
    6 $("[id$='" + ImageName + "']").get(0).src = "/Image/fbz.jpg";
    7 } else {
    8 ///清空file值
    9   // var file = $("#file1");
    10 // file.after(file.clone().val(""));
    11 // file.remove();
    12 //现实图片
    13   $("[id$='" + ImageName + "']").get(0).src = filename + newfilename;
    14 //将上传的图片值存到hf隐藏域中
    15 if ($("#hf").val() == "") {
    16 $("#hf").val(newfilename);
    17 } else {
    18 $("#hf").val($("#hf").val() + "-" + newfilename);
    19 }
    20 }
    21
    22 }
    23 //发送文件,手动提交表单
    24 //url是上传地址 upload是上传的file控件Id,funType操作类型,imageName上传图片Id
    25 function SendFile(url, upload, funType, imageName) {
    26 //点击上传按钮时(先验证了图片格式)
    27 if (funType == 'u') {
    28 if (checkData(upload)) {
    29 if ($("#inp") == null) {
    30 $("#form1").append("<input id='inp' type='text'/>");
    31 $("#inp").val($("[id$='" + upload + "']").val())
    32 } else {
    33 if ($("#inp").val() == $($("[id$='" + upload + "']").val())) {
    34 alert("");
    35 }
    36 }
    37 $("#form1").attr("action", "upload.ashx?UploadFile=" + url + "&ImageName=" + imageName + "&uploadId=" + upload);
    38 $("#form1").attr("target", "hd");
    39 $("#form1").submit();
    40 }
    41 } else if (funType == 'd') {
    42 //点击删除按钮时
    43 $("#form1").attr("action", "upload.ashx?del=" + url + $("[id$=" + imageName + "]").get(0).src.substring($("[id$=" + imageName + "]").get(0).src.lastIndexOf('/') + 1) + "&ImageName=" + imageName);
    44 $("#form1").attr("target", "hd");
    45 $("#form1").submit();
    46 }
    47 }
    48 ///验证上传的图片
    49 function checkData(upload) {
    50 var result = true;
    51 var fileName = $("[Id$=" + upload + "]").val(); //获得上传控件对象值
    52 if (fileName == "") {
    53 alert("请上传照片");
    54 return false;
    55 }
    56 var exName = fileName.substr(fileName.lastIndexOf(".") + 1).toUpperCase();
    57 if (exName != "JPG" && exName != "BMP" && exName != "GIF" && exName != "JPEG" && exName != "PNG") {
    58 alert("只能上传jpg,bmp,gif,jpeg,png格式的图片");
    59 result = false;
    60 }
    61
    62 return result;
    63
    64 }
    65
    66 //from重定向
    67 function rea() {
    68 $("#form1").attr("action", location.href);
    69 $("#form1").removeAttr("target");
    70 if ($("#form1").attr("target") == null || $("#form1").attr("target") == "") {
    71 return true;
    72 }
    73 else {
    74 return false;
    75 }
    76 }
    77 </script>
    78
    79
    80

        一般处理程序

      

    代码
    1 public void ProcessRequest(HttpContext context)
    2 {
    3 HttpRequest Request = context.Request;
    4 HttpResponse Response = context.Response;
    5 HttpServerUtility Server = context.Server;
    6 //指定输出头和编码
    7   Response.ContentType = "text/html";
    8 Response.Charset = "gb2313";
    9 HttpPostedFile f = Request.Files["upfile"];
    10 //获取上传的文件
    11   string oldfile = f.FileName.Substring(f.FileName.LastIndexOf("\\") + 1);
    12 if (Request.QueryString["del"] != null)
    13 {
    14 if (File.Exists(Server.MapPath(Request.QueryString["del"])))
    15 {
    16 File.Delete(Server.MapPath(Request.QueryString["del"]));
    17 Response.Write("<script>parent.UpdateMsddg('','','" + Request.QueryString["ImageName"] + "')</script>");
    18 }
    19 }
    20 else
    21 {
    22 string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss") + oldfile.Substring(oldfile.LastIndexOf('.'));
    23 string sql = Request.QueryString["UploadFile"];
    24 if (!Directory.Exists(Server.MapPath(sql)))
    25 {
    26 Directory.CreateDirectory(Server.MapPath(sql));
    27 }
    28 f.SaveAs(Server.MapPath(sql + newFileName));
    29 //如果要保存到其他地方,注意修改这里
    30 //调用父过程更新内容,注意要对des变量进行js转义替换,繁殖字符串不闭合提示错误
    31 context.Response.Write("<script>window.parent.UpdateMsddg('" + newFileName + "','" + sql + "','" + Request.QueryString["ImageName"] + "')</script>");
    32 }
    33
    34
    35 }
    36
    37

    只是简单的iframe无刷新,这是我第一次写东西,请多多指教, 谢谢

  • 相关阅读:
    【codevs4919】线段树练习4
    【51Nod1405】树上距离和 二次扫描与换根法
    【洛谷P1717】钓鱼
    【洛谷P1230】智力大冲浪
    【洛谷P1248】加工生产调度
    hdu 1195(搜索)
    hdu 1181(Floyed)
    hdu 1250(大整数)
    hdu 1180(广搜好题)
    hdu 1099(数学)
  • 原文地址:https://www.cnblogs.com/waters/p/iframe.html
Copyright © 2011-2022 走看看