表单元素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 上传图片的更多相关文章

  1. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  2. jQuery input -> file change事件bug

    由jQuery绑定类型为file的input控件的change事件,发现只能被触发一次,修改方法 --> 原始代码: $input.change(function() { // somethin ...

  3. input file 上传图片问题

    html代码如下: <input id="fileup" type="file" accept="image/*" capture=& ...

  4. jquery html5 file 上传图片显示图片

    jquery js 的代码:不同浏览器下的路径 //建立一個可存取到該file的url function getObjectURL(file) {     var url = null ;     i ...

  5. html5手机 input file 上传图片 调用API

    <input type="file" accept="video/*;capture=camcorder"> <input type=&quo ...

  6. (转)html中使用表单和input file上传图片

    本文转载自:http://hi.baidu.com/love_1210/item/120e452b42b2a854c38d59eb 客户端代码: <form name="form1&q ...

  7. input file上传图片预览,非插件

    Input标签 <input type="file" name="pic" onchange="changepic(this)" mu ...

  8. jquery input file 多图上传,单张删除,查看

    <div class="form-group"> <label for="imgs" class="col-md-3 col-sm- ...

  9. 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

    背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$(&qu ...

随机推荐

  1. 学习mybatis-3 step by step 篇一

    一.搭建简单mybatis-3环境(详细的中文文档) 集成开发环境:IDEA 项目:maven + mybatis-3 1.创建maven结构项目 含简单,如下图: 下一步后,填写groupid和ar ...

  2. [原][译][osgearth]关于Features & Symbology (特征与符号)(OE绘制矢量几何与特殊字符)讲解(OE官方文档翻译)

    原文参考:http://docs.osgearth.org/en/latest/user/features.html 自己翻译的,本人英文水平有限,有问题看原链接,原文 20170802重置修改部分翻 ...

  3. jar插件应用

    Gson(解析json) 作用:在servlet层中解析json 1:导入jar包 gson-2.2.4.jar 例如:Gson gson = new Gson();                  ...

  4. 利用Minhash和LSH寻找相似的集合(转)

    问题背景 给出N个集合,找到相似的集合对,如何实现呢?直观的方法是比较任意两个集合.那么可以十分精确的找到每一对相似的集合,但是时间复杂度是O(n2).当N比较小时,比如K级,此算法可以在接受的时间范 ...

  5. MongoDB中的数据聚合工具Aggregate和Group

    周煦辰 2016-01-16 来说说MongoDB中的数据聚合工具. Aggregate是MongoDB提供的众多工具中的比较重要的一个,类似于SQL语句中的GROUP BY.聚合工具可以让开发人员直 ...

  6. hive row_number等窗口分析函数

    一.排序&去重分析 row_number() over(partititon by col1 order by col2) as rn 结果:1,2,3,4 rank() over(parti ...

  7. 数据库使用B+树原理

    转载:http://zhuanlan.51cto.com/art/201808/582078.htm https://www.cnblogs.com/vincently/p/4526560.html( ...

  8. Asp.Net使用org.in2bits.MyXls.dll操作excel的应用

    首先下载org.in2bits.MyXls.dll(自己的在~\About ASP.Net\Asp.Net操作excel) 添加命名空间: using org.in2bits.MyXls;using ...

  9. 苹果iPhone 5C和5S发布后,消费者如何选择?

    9月11日凌晨苹果新品发布会,笔者的朋友圈居然没有看直播的,真果粉太少了.笔者来阐述一些容易忽略的东西. iPhone5C和5S与5有什么不一样? 新品iPhone 5S 外观与iPhone5 相似度 ...

  10. jinja 2 filter 使用

    文档地址 http://jinja.pocoo.org/docs/templates/#builtin-filters indent indent(s, width=4, indentfirst=Fa ...