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 ...
随机推荐
- html 入门2-表
html 入门-列表 表格 表单 一.表标签 1,无序列表 ( ul:li ) 注意:代码排版必须要层次分明 2,有序列表 (ol:li) 3,自定义列表 (dl:li) 二.表格标签 1,tabl ...
- c++ 重设容器的长度(resize)
#include <iostream> #include <vector> using namespace std; int main () { vector<int&g ...
- echarta3 北京,上海地图
1.首先你得到echarts官网下载js,建议下载完整代码,这样你就很容易根据我的路径找到beijing.js 2.把echarts.js和beijingi.js根据你的路径引对,然后就可以copy我 ...
- .NET连接MongoDB数据库实例教程
这则小窍门将讲述如何开发一个.NET应用来连接Mongo数据库并执行多种操作.同时还稍微涉及了Mongo数据库和多种命令. 使用代码 让我们从Mongo数据库的一些细节和基本命令开始,并最终介绍如何创 ...
- Nvidia Driver
https://www.if-not-true-then-false.com/2015/fedora-nvidia-guide/ https://javacodes.cn/322.html https ...
- 《转》深入理解Activity启动流程(三)–Activity启动的详细流程2
本文原创作者:Cloud Chou. 出处:本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启 ...
- Alpha冲刺 (4/10)
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9979357.html 作业博客:https://edu.cnblogs.com/campus/ ...
- ios系统降级
1.使用PP助手/iTunes备份好文件资料,以防重要信息丢失: 2.设备连接iTunes,按住Shift键之后点击“恢复iPhone”,选择已下载好的iOS8.4.1固件,等待更新完成即可. 注意要 ...
- tensorflow中 tf.reduce_mean函数
tf.reduce_mean 函数用于计算张量tensor沿着指定的数轴(tensor的某一维度)上的的平均值,主要用作降维或者计算tensor(图像)的平均值. reduce_mean(input_ ...
- iOS-----多线程之NSThread
多线程 iOS平台提供了非常优秀的多线程支持,程序可以通过非常简单的方式来启动多线程,iOS平台不仅提供了NSThread类来创建多线程,还提供了GCD方式来简化多线程编程,提供了NSOperatio ...