表单元素file设置隐藏,通过其他元素打开:

.imgfile为input file

  1. $(".ul").click(function () {return $(".imgfile").click();
  2. });

JS部分:

  1. $(".imgfile").change(function () {
  2. var file = $(".imgfile").get(0).files[0];
  3. var reader = new FileReader();
  4. reader.readAsDataURL(file);
  5. reader.onloadend = function () {
  6. $("#Image1").attr("src", reader.result);
  7. }
  8. });
  9.  
  10. $("#register2").click(function () {var IMG_BASE = $("#Image1").attr("src"); //要上传的图片的base64编码
  11. var IMG_ROUTE = $(".imgfile").val();//获取上传图片路径,为获取图片类型使用
  12. var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位,判断图片类型
  13. var IMG_FOMATE = "jpeg"; //图片类型***
  14. if (IMG_ENDFOUR.trim() == ".jpg")
  15. IMG_FOMATE = "jpg";
  16. else if (IMG_ENDFOUR.trim() == ".png")
  17. IMG_FOMATE = "png";
  18. else if (IMG_ENDFOUR.trim() == ".bmp")
  19. IMG_FOMATE = "bmp";
  20. //图片正式开始上传
  21. $.ajax({
  22. type: "post",
  23. url: "server/head.ashx",
  24. data: { 'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE },
  25. dataType: "text",
  26. success: function (data) {
  27. //data为返回的图片路径
  28. });
  29. });

一般处理程序部分:

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

    html  入门-列表 表格 表单 一.表标签 1,无序列表 ( ul:li ) 注意:代码排版必须要层次分明 2,有序列表 (ol:li) 3,自定义列表 (dl:li) 二.表格标签 1,tabl ...

  2. c++ 重设容器的长度(resize)

    #include <iostream> #include <vector> using namespace std; int main () { vector<int&g ...

  3. echarta3 北京,上海地图

    1.首先你得到echarts官网下载js,建议下载完整代码,这样你就很容易根据我的路径找到beijing.js 2.把echarts.js和beijingi.js根据你的路径引对,然后就可以copy我 ...

  4. .NET连接MongoDB数据库实例教程

    这则小窍门将讲述如何开发一个.NET应用来连接Mongo数据库并执行多种操作.同时还稍微涉及了Mongo数据库和多种命令. 使用代码 让我们从Mongo数据库的一些细节和基本命令开始,并最终介绍如何创 ...

  5. Nvidia Driver

    https://www.if-not-true-then-false.com/2015/fedora-nvidia-guide/ https://javacodes.cn/322.html https ...

  6. 《转》深入理解Activity启动流程(三)–Activity启动的详细流程2

    本文原创作者:Cloud Chou. 出处:本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启 ...

  7. Alpha冲刺 (4/10)

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9979357.html 作业博客:https://edu.cnblogs.com/campus/ ...

  8. ios系统降级

    1.使用PP助手/iTunes备份好文件资料,以防重要信息丢失: 2.设备连接iTunes,按住Shift键之后点击“恢复iPhone”,选择已下载好的iOS8.4.1固件,等待更新完成即可. 注意要 ...

  9. tensorflow中 tf.reduce_mean函数

    tf.reduce_mean 函数用于计算张量tensor沿着指定的数轴(tensor的某一维度)上的的平均值,主要用作降维或者计算tensor(图像)的平均值. reduce_mean(input_ ...

  10. iOS-----多线程之NSThread

    多线程 iOS平台提供了非常优秀的多线程支持,程序可以通过非常简单的方式来启动多线程,iOS平台不仅提供了NSThread类来创建多线程,还提供了GCD方式来简化多线程编程,提供了NSOperatio ...