JQuery input file 上传图片
表单元素file设置隐藏,通过其他元素打开:
.imgfile为input file
$(".ul").click(function () {return $(".imgfile").click();
});
JS部分:

$(".imgfile").change(function () {
var file = $(".imgfile").get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
$("#Image1").attr("src", reader.result);
}
});
$("#register2").click(function () {var IMG_BASE = $("#Image1").attr("src"); //要上传的图片的base64编码
var IMG_ROUTE = $(".imgfile").val();//获取上传图片路径,为获取图片类型使用
var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位,判断图片类型
var IMG_FOMATE = "jpeg"; //图片类型***
if (IMG_ENDFOUR.trim() == ".jpg")
IMG_FOMATE = "jpg";
else if (IMG_ENDFOUR.trim() == ".png")
IMG_FOMATE = "png";
else if (IMG_ENDFOUR.trim() == ".bmp")
IMG_FOMATE = "bmp";
//图片正式开始上传
$.ajax({
type: "post",
url: "server/head.ashx",
data: { 'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE },
dataType: "text",
success: function (data) {
//data为返回的图片路径
});
});

一般处理程序部分:

using System.IO; //需要这三个命名空间
using System.Drawing;//***
using System.Drawing.Imaging;//*** string imgBase = context.Request["imgBase"];//传递过来的base64编码
string imgFomate = context.Request["imgFormat"];//传递过来的图片格式
string end = "1";
string imgReadyBase = imgBase.Substring(imgBase.IndexOf("4") + 2);//截取base64编码无用开头
byte[] bytes = System.Convert.FromBase64String(imgReadyBase);//base64转为byte数组
MemoryStream ms = new MemoryStream(bytes);//创建内存流,将图片编码导入
Image img = Image.FromStream(ms);//将流中的图片转换为Image图片对象
//利用时间种子解决伪随机数短时间重复问题
Random ran = new Random((int)DateTime.Now.Ticks);
//文件保存位置及命名,精确到毫秒并附带一组随机数,防止文件重名,数据库保存路径为此变量
string s = ran.Next().ToString();
string serverPath = "../head/" + DateTime.Now.ToString("yyyyMMddhhmmssms") +s+ "." + imgFomate;
//路径映射为绝对路径
string path = context.Server.MapPath(serverPath);
ImageFormat imgfor = ImageFormat.Jpeg;//设置图片格式
if (imgFomate == "png") imgfor = ImageFormat.Png;
try
{
img.Save(path, imgfor);//图片保存
}
catch { end = "0"; }
end = "head/" + DateTime.Now.ToString("yyyyMMddhhmmssms") +s+ "." + imgFomate;
context.Response.Write(end);
context.Response.End();

JQuery input file 上传图片的更多相关文章
- jquery解决file上传图片+图片预览
js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...
- jQuery input -> file change事件bug
由jQuery绑定类型为file的input控件的change事件,发现只能被触发一次,修改方法 --> 原始代码: $input.change(function() { // somethin ...
- input file 上传图片问题
html代码如下: <input id="fileup" type="file" accept="image/*" capture=& ...
- jquery html5 file 上传图片显示图片
jquery js 的代码:不同浏览器下的路径 //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; i ...
- html5手机 input file 上传图片 调用API
<input type="file" accept="video/*;capture=camcorder"> <input type=&quo ...
- (转)html中使用表单和input file上传图片
本文转载自:http://hi.baidu.com/love_1210/item/120e452b42b2a854c38d59eb 客户端代码: <form name="form1&q ...
- input file上传图片预览,非插件
Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...
- jquery input file 多图上传,单张删除,查看
<div class="form-group"> <label for="imgs" class="col-md-3 col-sm- ...
- 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$(&qu ...
随机推荐
- 用PHP开发命令行工具
介绍 用过laravel开发过项目的都应该用过artisan,通过artisan我们可以在命令行中创建控制器类,Eloquent类等,今天我们将通过php来开发命令行工具 开发环境与工具 使用vagr ...
- hihocode 股票价格 优先队列+map
股票价格 时间限制:20000ms 单点时限:2000ms 内存限制:256MB 描述 小Hi最近在分析一支股票的价格走势,他需要一个程序来辅助分析.这个程序会接收3种消息(指令): 价格信息,格式是 ...
- 关于 Flutter的Button按钮没有高度设置
flutter 里面 RaisedButton.FloatingActionButton.FlatButton.OutlineButton 中四个button都无高度设置,如下用RaisedButto ...
- Java网络编程学习A轮_03_抓包分析TCP四次挥手
参考资料: http://www.jellythink.com/archives/705 示例代码: https://github.com/gordonklg/study,socket module ...
- 插件uaredirect.js实现电脑版跳转到手机版网站
一.介绍 这段时间,有好多朋友问我,跳转到手机版的那个JS是怎么写的.其实这个JS也不是我写的,是百度siteapp下的一款跳转的产品,使用起来很方便.你可以用这款JS跳转到手机版,也可以跳转到任何你 ...
- Docker和k8s的区别与介绍
本文来源:鲜枣课堂 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的容器技术. LXC, ...
- python json与字典对象互相转换
改文章转自:https://www.cnblogs.com/Lin-Yi/p/7640147.html 1 import requests 2 import json 3 ''' 4 json.loa ...
- bzoj2120: 数颜色 带修莫队
墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2. R P ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- 阿里云服务器购买 发布web项目全过程
http://blog.csdn.net/liona_koukou/article/details/50496946