<div class="photo" style="display:none;" id="upPhoto"><div class="pop-cover"></div><div style="position: absolute; top:30%; left:5%; width:90%; margin:0 auto; z-index:99;">
<a href="#" class="potos tbtm" ><input type="file" name="file" id="file1"  style="display:block; width:100%; text-align:center; opacity: 0;  cursor:pointer;"/><span style=" z-index:1; position:relative; top:-8px; ">本地上传</span></a><a href="#" class="cancel">取消</a></div></div>  
    </div>
  </section>
   </div>
    </form>
</body>
<script type="text/javascript" src="js/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/lib/ajaxfileupload.js"></script>
<script>

$(document).ready (function () {

$("#head").click(function () {
        $(".photo").show();

});
    $("#file1").on("change", function () {
        change();
    })
    function change(target) {
        $(".photo").hide();
        var allowExtention = ".jpg,.bmp,.png,.jpeg";
       // console.log(target);
        var input = document.getElementById("file1"); //获取input标签
        var extention = input.value.substring(input.value.lastIndexOf(".") + 1).toLowerCase(); //截取后缀
        if (extention && allowExtention.indexOf(extention) > -1) {  //判断上传图片类型
            var fileSize = input.files[0].size; //获取上传图片大小
            if (fileSize) {
                if (fileSize <1.5* 1000 * 1024) {  //js限制图片上传大小
                    ajaxFileUpload();
                }
                else
                    addSystemTip($page, "上传图片过大!");
            }

}
        else
            addSystemTip($page, "上传图片格式不正确!");

}

// 使用jquery ajaxFileupload插件 原理是把一个form提交到后端来获取图片

//所以 input type=file 标签必须要给一个 name属性,是必须的否则后台无法获取图片
    function ajaxFileUpload() {
        $.ajaxFileUpload({
            url: "MyAccount.aspx?type=img"////用于文件上传的服务器端请求地址
            , secureuri: false // //是否需要安全协议,一般设置为false
            , fileElementId: 'file1' //文件上传域的ID
            , dataType: 'json' //返回值类型 一般设置为json
          //  , type: 'post'
            , success: function (data, status)  //服务器成功响应处理函数
            {                             
                $("#img").attr("src", data.imgurl);
                //  var input = document.getElementById("file1");
                var span = $("#file1").next();
                $("#file1").remove();   //上传成功后删除file标签,否则无法继续上传          
                var ele = $('<input type="file" name="file"  id="file1" style="display:block; width:100%; text-align:center; opacity: 0;  cursor:pointer;"/>'); //重新创建file标签
                ele.insertBefore(span);
                ele.on("change", function () { //重新绑定change事件句柄
                    change();
                })            
                $(".photo").hide();
            },
            error: function (data, status, e)//服务器响应失败处理函数
            {
                $(".photo").hide();
            }
        });        
    }
    $(".cancel").click(function () {

$(".photo").hide();

})
    $(".pop-cover").mousemove(function () {

$(".photo").hide();

})
})
</script>
</html>

//对应后台代码,并且将上传图片重新绘画一下 指定像素大小

public partial class MyAccount : MemberBase
    {
        public MemberDetails user = new MemberDetails();
        
        public string ImageURl = "";
        public string encodeName = "";
        public string sex = "保密";
        string domain = XpVShop.MyFuc.Utils.GetAppSettingValue("turnUrl") + "/Upload/users/";
        string localUrl = XpVShop.MyFuc.Utils.GetAppSettingValue("PCUploadPath2");

// string domain = "http://localhost:89/Upload/images/";//本地测试使用
       // string localUrl=@"F:\hz\code\aishop\Publish\vshop\Upload\images\";
      
        protected void Page_Load(object sender, EventArgs e)
        {

if (!IsPostBack)
            {
                XpVShop.MyFuc.LogHelper.Write("MyAccount mid:" + CurrentUser.MemberID);
                user = MemberBLL.GetMemberDetails(CurrentUser.MemberID);
                string u = "vshop_ChangeName.aspx";
                encodeName = XpVShop.MyFuc.Utils.UrlEncode(u);
                if (user.Photo.IndexOf("http://wx.qlogo.cn") == -1)
                    ImageURl = domain + user.Photo;
                else
                    ImageURl = user.Photo;
                if (!string.IsNullOrEmpty(user.Mobile))
                    user.Mobile = user.Mobile.Substring(0, 5) + "***" + user.Mobile.Substring(user.Mobile.Length - 1, 1);
                ;
                if (user.Sex) sex = "男";
                else sex = "女";
                string type = Utils.ReqStrParams("type", "");
                if (type == "img")
                {
                    HttpFileCollection files = Request.Files;
                    string msg = string.Empty;
                    string error = string.Empty;
                    string imgurl;

if (files.Count > 0)
                    {
                        string name = System.IO.Path.GetFileName(files[0].FileName);
                        // string url = Server.MapPath("Upload/images/") + CurrentUser.MemberID + name;

XpVShop.MyFuc.LogHelper.Write(" MyAccount 存放路径 localUrl:" + localUrl);
                        try
                        {
                            string strGuid = System.Guid.NewGuid().ToString().ToUpper(); //始化 Guid 类的新
                            string strFileExt = name.Substring(name.LastIndexOf(".")); //得到图片的后缀
                            string path = localUrl + strGuid  + strFileExt;
                            System.Web.HttpPostedFile postedFile = files[0];
                            XpVShop.MyFuc.LogHelper.Write("MyAccount 存放地址之前;" + path);                        
                           // files[0].SaveAs(localUrl + CurrentUser.MemberID + name);
                            XpVShop.MyFuc.Utils.GetThumbNail(name, 350,200, "image/pjpeg", false, postedFile.InputStream, path);
                            imgurl = strGuid + strFileExt;
                            user.Photo = imgurl;                        
                            MemberBLL.UpdateMemberPhoto(user);
                            CurrentUser.Photo = imgurl;
                            ImageURl = domain + user.Photo;
                            XpVShop.MyFuc.LogHelper.Write(" MyAccount 保存图片路径" + ImageURl + "保存数据库字段:user.Photo:" + imgurl + "存放地址 " + path);
                            // msg = " 成功! 文件大小为:" + files[0].ContentLength;                                              
                            string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + ImageURl + "'}";
                            Response.Write(res);
                            Response.End();
                        }
                        catch (Exception ex)
                        {
                            XpVShop.MyFuc.LogHelper.Write("MyAccount ex:" + ex.ToString());

}

}
                }
            }

}     
    }

/// <summary>
           /// 处理上传图片为指定像素
           /// </summary>
           /// <param name="strFileName">文件名</param>
           /// <param name="iWidth"></param>
           /// <param name="iheight"></param>
           /// <param name="strContentType">图片类型</param>
           /// <param name="blnGetFromFile">是否是从本地文件名获取文件流</param>
           /// <param name="ImgStream">文件流</param>
           ///  <param name="path">保存路径</param>
           public static void GetThumbNail(string strFileName, int iWidth, int iheight, string strContentType, bool blnGetFromFile, System.IO.Stream ImgStream, string path)
           {
               System.Drawing.Image oImg;
               if (blnGetFromFile) oImg = System.Drawing.Image.FromFile(strFileName);
               oImg = System.Drawing.Image.FromStream(ImgStream);
               oImg = oImg.GetThumbnailImage(iWidth, iheight, null, IntPtr.Zero);   //GetThumbnailImage方法是返回此Image对象的缩略图
              // string strGuid = System.Guid.NewGuid().ToString().ToUpper(); //始化 Guid 类的新
              // string strFileExt = strFileName.Substring(strFileName.LastIndexOf("."));  //得到图片的后缀
               //MemoryStream MemStream = new MemoryStream(); //创建其支持存储区为内存的流     
               oImg.Save(path);             
           }

html5 完整图片上传的更多相关文章

  1. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  2. iOS 开发之路(WKWebView内嵌HTML5之图片上传) 五

    HTML5页面的图片上传功能在iOS端的实现. 首先,页面上用的是plupload组件,在wkwebview上存在两个坑需要修复才能正常使用. 问题:在webview上点击选择照片/相机拍摄,就会出现 ...

  3. hybird app项目实例:安卓webview中HTML5拍照图片上传

    应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...

  4. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  5. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  6. HTML5 之图片上传预处理

    在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 像我这么为用户着想的程序员,绝对不会让这种事情发生的, ...

  7. html图片上传阅览并且点击放大

                  关闭   qq_31540195的博客       目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典           程序员9月书讯      每周荐书: ...

  8. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  9. LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

随机推荐

  1. python基础知识8——模块1——自定义模块和第三方开源模块

    模块的认识 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...

  2. 使用HTML5新支持的搭建WebRtc环境来作为视频通讯

    发现如果再重新设计这块的话,又会有不同的思路.对于可定位能力,我们可以全息日志采集,将每个用户在整个系统的走向异步的抓取下来,再同步到专门的日志分析系统,在这个系统中可以根据用户号码.订单号进行过滤分 ...

  3. loadrunner --global schedule设置

  4. 掷骰子-IOS新手项目练习(抱歉,由于个人原因,图片没显示,要源码的项目私聊)

    ---恢复内容开始--- 今天我们来讲的就是项目<掷骰子> 首先我们先下载资源包,也就是我们需要的图片[点击图片下载] 在我们下载完图片之后,我们就可以开始创建项目 一.我们项目的做法可以 ...

  5. MYBATIS 文档

    http://www.mybatis.org/mybatis-3/zh/index.html

  6. 转载:jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  7. redis原理分析

    基本全是参考http://blog.csdn.net/a600423444/article/details/8944601     redis的使用大家都很熟悉,可能除了watch 锁,pipelin ...

  8. spring mvc 第二天【注解实现springmvc Handler处理ajax简单请求 的配置】

    这里使用的是在前台发起ajax请求Handler,后台伪造数据响应给前台, 配置对应ajax请求的Handler信息如下 @Controller public class MyController { ...

  9. Mysql Communication link failure :1153 Got a packet bigger than 'max_allowed_packet' bytes

    出现这种情况: 临时解决方法是: 登录mysql: 执行: set global max_allowed_packet=1000000000;       set global net_buffer_ ...

  10. M站开发规范——By Klax

    M站开发的规范,根据具体情况,涉及代码组织的模式,代码编码风格,模块化等,经...研究...决定: 1.采用AMD 规范(RequireJS)实现js模块化. 2.单个文件尽量采用面向对象编程和模块化 ...