html5 完整图片上传
<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 完整图片上传的更多相关文章
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- iOS 开发之路(WKWebView内嵌HTML5之图片上传) 五
HTML5页面的图片上传功能在iOS端的实现. 首先,页面上用的是plupload组件,在wkwebview上存在两个坑需要修复才能正常使用. 问题:在webview上点击选择照片/相机拍摄,就会出现 ...
- hybird app项目实例:安卓webview中HTML5拍照图片上传
应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- HTML5 之图片上传预处理
在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 像我这么为用户着想的程序员,绝对不会让这种事情发生的, ...
- html图片上传阅览并且点击放大
关闭 qq_31540195的博客 目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典 程序员9月书讯 每周荐书: ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android
LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...
随机推荐
- Mathematica(MMA)闪电入门系列 目录与说明
Mathematica(MMA)闪电入门系列 入口 本文起到目录作用,点击以下链接,可以打开各章: 一.MMA概述二.表操作三.函数与递归四.表达式的计算五.过程式编程和调试技巧六.图形七.程序包 ...
- 前端mac下的工具
1.制作base64图片的 DataURLMaker imageAlpha 减少png图片尺寸 2.共享iphone X-Mirage 3.制作交互图 briefs 4.制作矢量图 sketch
- 深入浅出讲解:php的socket通信
对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问:1. 什么是TCP/IP.UDP?2. Socke ...
- 传输层(2)-TCP连接的建立和终止、TIME_WAIT状态
1.TCP连接的建立和终止 1)三路握手 客户端发送一个SYN(同步)分解,告诉服务器客户将在连接中发送的数据的初始序列号. 服务器发送确认客户的SYN(ACK),同时自己也得发送一个SYN分节,它含 ...
- 关于jQuery中环境配置中的问题
一开始无法显示出效果,配置和代码如 这代码本没有错 但是就是无法显示 原因是我下载了2.x版本的jQuery,jQuery2.x版本是不支持IE6/7/8的,也有很多主流的浏览器无法显示出效果,于是在 ...
- XtraBackup安装
1.从官网下载XtraBackup2.4.4. percona-xtrabackup-24-2.4.4-1.el6.x86_64.rpm 2.安装依赖包 yum -y install perl per ...
- angular 调试 js (分 karms protractor / test e2e unit )
首页订阅 Protractor端到端的AngularJS测试框架教程 2014年01月18日 分类:教程, JavaScript, AngularJS Protractor是一个建立在WebDrive ...
- MySQL出现Access denied for user 'root'@'%' to database 'netai_test'问题
访问数据库时报错信息 Access denied for user 'root'@'%' to database 'netai_test' 原因:这是由于创建数据库后没有对用户授权,使用户可以访问数据 ...
- nth_element 测试程序
/******************************************************************** created: 2014/04/29 11:35 file ...
- python中获取今天昨天和明天的日期
import datetime today = datetime.date.today()oneday = datetime.timedelta(days=1)yesterday = today-on ...