zoukankan      html  css  js  c++  java
  • ajax无刷新上传图片

    页面:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script type="text/javascript" language="javascript">
            $(function() {
                $('#fileUp').change(function() {
                    $('#uploadLog').html('开始上传中....');
                    $('#formFile').submit();
                });
            })
            function uploadSuccess(msg) {
                if (msg.split('|').length > 1) {
                    $('#imgShow').attr('src', msg.split('|')[1]);
                    $('#uploadLog').html(msg.split('|')[0]);
                } else {
                    $('#uploadLog').html(msg);
                }
            }
        </script>
     
    </head>
    <body>
        <!--
            大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的iframe的name值,
            这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面中表单处理,
            并且不会产生当前页面跳转!
         -->
        <form id='formFile' name='formFile' method="post" action="IbeaconHandler.ashx" target='frameFile'
        enctype="multipart/form-data">
        <input type='file' id='fileUp' name='fileUp' />
        <div id='uploadLog'>
        </div>
        <br />
        <img width='200' src='' height='200' id='imgShow' alt='缩略图' />
        </form>
        <!--
            这个iframe拿到post过来的表单数据后会开始在自身内部访问post过来的页面地址,在内部中它会刷新页面,
            但是这已不重要了,因为当前的iframe已经被我display:none隐藏了!所以这样给用户看起来像是无刷新的
            页面文件上传,其实只是做一个一个小小的技巧!
        -->
        <iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
    </body>
    </html>

    一般处理程序:

    <%@ WebHandler Language="C#" Class="IbeaconHandler" %>
     
    using System;
    using System.Web;
    using System.IO;
     
    public class IbeaconHandler : IHttpHandler {
         
        public void ProcessRequest (HttpContext context) {
            context.Response.ContentType = "text/plain";
            //string fname = context.Request.QueryString["op"].ToString();
            //string str =fname+"({name:'judy',age:'23'})";
             try    {
                 //获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件
                 HttpPostedFile file = context.Request.Files["fileUp"];
                 if (file != null)
                 {
                     //当前文件上传的目录
                     string path = context.Server.MapPath("~/images/");
                     //当前待上传的服务端路径
                     string imageUrl = path +Path.GetFileName(file.FileName);
                     //当前文件后缀名
                     string ext = Path.GetExtension(file.FileName).ToLower();
                     //验证文件类型是否正确
                     if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
                     {
                         //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                         context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件格式不正确!上传格式有(.gif、.jpg、.png、.bmp)');</script>");
                         context.Response.End();
                     }
                     //验证文件的大小
                     if (file.ContentLength > 1048576)
                     {
                         //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址 
                         context.Response.Write("<script>window.parent.uploadSuccess('你上传的文件不能大于1048576KB!请重新上传!');</script>");
                         context.Response.End();
                     }
                     //开始上传
                     file.SaveAs(imageUrl);
                     //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址
                     //如果成功返回的数据是需要返回两个字符串,我在这里使用了|分隔  例: 成功信息|/Test/hello.jpg
                     context.Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
                     context.Response.End();
                 }
                 else
                 {
                     //上传失败
                     context.Response.Write("upload lose!");
                     context.Response.End();
                 }
             }
             catch
             {
                 //上传失败 
                 context.Response.Write("upload lose!");
                 context.Response.End();
             }
            //context.Response.Write("hello word");
        }
      
        public bool IsReusable {
            get {
                return false;
            }
        }
     
    }
  • 相关阅读:
    Subversion学习笔记
    单元测试 学习笔记 之五
    单元测试 学习笔记 之四
    将全球通讯簿导入pop3客户端联系人
    isa 2006 sp1发布
    使用POWERSHELL管理OCS 2007
    SCCM 2007 排错
    空空排错日志:OCS错误日志14501等解决办法
    在AD没有备份的情况下还原被删除的数据
    冲击波又回来啦?
  • 原文地址:https://www.cnblogs.com/bosamvs/p/6004407.html
Copyright © 2011-2022 走看看