这两天看了很多上传图片的插件，功能强大的可以将图片剪切，放大，缩小等，不过往往这些插件都很大，需要加载好多个css和js文件。我做的就是一个很小的项目，之前的模板就已经调用好几个css了，再加往往会重复，很麻烦。
后来准备写一个只能将本地文件上传，不涉及剪切等复杂操作的，这样就简单多了。
话不多说先上代码，首先是我已经做好正在使用的部分代码。

可以使用的上传图片代码

view层获取图片

此代码同样可以用来获取文件

HTML代码

<div class="field"><input type="text" id="imagedata" name="imagedata" class="input tips" style="width:25%; float:left;" data-toggle="hover" data-place="right" readonly="readonly" /><input type="file" onchange="selectImage(this);" id="image" name="image" class="button bg-blue margin-left" value="+ 浏览上传" style="float:left;" ><img id="imagedisplay" src="" class="img-news" alt="图片尺寸：205*140"style="margin-left:50px;" />
</div>

JS代码

<script>var image = '';function selectImage(file) {if (!file.files || !file.files[0]) {return;}var reader = new FileReader();reader.onload = function (evt) {// 将图片显示在id为imagedisplay的imgdocument.getElementById('imagedisplay').src = evt.target.result;// 将图片的base64数据存在id为imagedata的一个文本框document.getElementById('imagedata').value = evt.target.result.toString();}reader.readAsDataURL(file.files[0]);}
</script>

呃，这里是利用form直接向控制器提交数据，所以没有ajax的代码。

　控制器存储数据

将base64的字符串转换为byte[]的图片

public byte[] GetImageByte(string imagedata)
{// 因为字符串前带有“data:image/png;base64”所以需要先截取string pic = imagedata.Remove(1, 22);byte[] imageBytes = Convert.FromBase64String(pic);return imageBytes;}

控制器存储数据

news.picture = GetImageByte(imagedata);

以下部分是还没有使用的代码

　从数据库读取数据显示

ｖｉｅｗ层直接调用这个方法即可

public FileResult Image()
{  string imagepath = "";var img= db.T_News.SqlQuery("select image from T_News").FirstOrDefault();byte[] image = img; return new FileContentResult(image, "image/jpeg");}

　其他可能用到的方法

参数是图片路径:返回Byte[]类型:

        public byte[] GetPictureData(string imagepath){imagepath = "E:\\123.png";//根据图片文件的路径使用文件流打开，并保存为byte[]     System.IO.FileStream fs = new System.IO.FileStream(imagepath, System.IO.FileMode.Open);byte[] byData = new byte[fs.Length];fs.Read(byData, 0, byData.Length);fs.Close();return byData;}

参数类型是Image对象，返回Byte[]类型:

     public byte[] PhotoImageInsert(System.Drawing.Image imgPhoto){string pic = "";byte[] imageBytes = Convert.FromBase64String(pic);//将Image转换成流数据，并保存为byte[]     System.IO.MemoryStream mstream = new System.IO.MemoryStream();imgPhoto.Save(mstream, System.Drawing.Imaging.ImageFormat.Bmp);byte[] byData = new Byte[mstream.Length];mstream.Position = 0;mstream.Read(byData, 0, byData.Length);mstream.Close();return byData;}

网上找到的两个例子

获取图片位置，不过得到的位置为fakepath

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定义input type="file" 的样式</title><style type="text/css">body {font-size: 14px;}input {vertical-align: middle;margin: 0;padding: 0;}.file-box {position: relative;width: 340px;}.txt {height: 22px;border: 1px solid #cdcdcd;width: 180px;}.btn {background-color: #FFF;border: 1px solid #CDCDCD;height: 24px;width: 70px;}.file {position: absolute;top: 0;right: 80px;height: 24px;filter: alpha(opacity:0);opacity: 0;width: 260px;}</style>
</head>
<body><div class="file-box"><form action="" method="post" enctype="multipart/form-data"><input type='text' name='textfield' id='textfield' class='txt' /><input type='button' class='btn' value='浏览...' /><input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /><input type="submit" name="submit" class="btn" value="上传" /></form></div>
</body>
</html>

获取图片的base64，我的代码就是依据这个改的

<html>
<body><img id="image" src="" /><br /><input type="file" onchange="selectImage(this);" /><br /><input type="button" onclick="uploadImage();" value="提交" /><input id="imagepath"><script>var image = '';function selectImage(file) {if (!file.files || !file.files[0]) {return;}var reader = new FileReader();reader.onload = function (evt) {document.getElementById('image').src = evt.target.result;image = evt.target.result;alert(document.getElementById('image').src);document.getElementById('imagepath').value = document.getElementById('image').src.toString();}reader.readAsDataURL(file.files[0]);// alert("evt.target.result.type");// document.getElementById('imagepath').value = evt.target.result;}function uploadImage() {$.ajax({type: 'POST',url: 'Home/Imageabc',data: {image: image},async: false,dataType: 'json',success: function (data) {if (data.success) {alert('上传成功');} else {alert('上传失败');}},error: function (err) {alert('网络故障');}});}</script><script src="jquery.js"></script>
</body>
</html>

网上资料链接

http://www.cnblogs.com/feiyun126/archive/2013/02/04/2892052.html
http://www.cnblogs.com/freeliver54/p/3430956.html
http://www.cnblogs.com/lesliefang/archive/2012/03/15/2399418.html
http://www.52ij.com/jishu/aspx/155104.html
http://www.cnblogs.com/xpxu/archive/2010/04/03/1703868.html

上传本地图片到数据库相关推荐

php上传图片代码编辑,simditor上传本地图片 php
网上有很多simditor这个编辑器的文档,但是大多是重复的,并且php做服务端的也很少.最近做了一个上传功能,研究了一下,跟大家分享一下. 首先说一下逻辑,理解好了逻辑,才能更好的理解代码. 点击 ...
thymeleaf 使用图片url或者上传本地图片
配置文件: # 声明图片的绝对路径和相对路径 file.upload.path=F://images/ file.upload.path.relative=/images/** 配置类: import ...
tinymce4.x 上传本地图片(自己写个插件)
tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...
富文本框TinyMCE4.8上传本地图片基本配置（前端篇）
最近使用了一下TinyMCE富文本框,感觉是非常不错的一款,配置简单,界面优美,完全免费...推荐大家使用. 官方文档也比较容易阅读,大家有兴趣的可以自己去看看https://www.tiny.clo ...
解决MarkDown上传本地图片无法显示
解决MarkDown上传本地图片无法显示前言提示:什么牛头马面写的代码,今天写个技术博客想插入一张图片发现无法显示,接着按流程在博客一顿找,发现我开头第一句,不知道怎么形容垃圾场里面找垃圾的心情. ...
有道云笔记markdown上传本地图片的方法
有道云笔记markdown上传本地图片的方法有道云笔记markdown模式非会员发现不能直接截屏粘贴图片了.后来网上搜集了下方法,发现了好几种解决办法. 当然,如果你一年,不差那两百块钱,直 ...
kindeditor上传本地图片的问题
终于给我发现kindeditor上传本地图片时,为什么出现服务器错误原来demo.jsp里的: KE.show({ id : 'content1', imageUploadJson : '../.. ...
关于wangEditor5上传本地图片的详细配置
最近在写个人博客用到了富文本编辑器,这里用的是wangEditor5版本,但是浏览了官网并没有发现上传本地图片的详细配置,很是头疼,最终在官方的demo源码中找到了本地上传的详细配置,豁然开朗! co ...
element-tiptap富文本编辑器，上传本地图片
因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过) data () {// ...

上传本地图片到数据库