提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供常用开发手册和开发工具
您现在的位置：& >
Hbuilder MUI 上传图片到服务器完整版（ASP.NET版）
Hbuilder MUI 上传图片到服务器完整版（ASP.NET版）
html布局，比较简单，模仿微信的：
&div&class=&dynamic_images&&&
&&&&&&&&&!--&li&&img&src=&images/cbd.jpg&&&/li&--&&
&&&&&&&&&li&&img&src=&images/iconfont-tianjia.png&&id=&addnew&&&/li&&
&&&&&&&&&!--&li&&span&class=&mui-icon&iconfont&icon-jia2&&style=&font-size:&28&&&/span&&/li&--&&
&&&&&/ul&&
页面中js部分
var&f1&=&null;&
var&picarr&=&new&Array();&
var&basearr&=&new&Array();&
var&lat&=&&&,&
&&&&longt&=&&&;&
var&files&=&[];&
&www.bcty365.com
function&upload()&{&
&&&&var&wt&=&plus.nativeUI.showWaiting();&
&&&&var&task&=&plus.uploader.createUpload(server&+&&?action=dynamicadd&,&{&
&&&&&&&&&&&&method:&&POST&&
&&&&&&&&},&
&&&&&&&&function(t,&status)&{&&
&&&&&&&&&&&&if&(status&==&200)&{&
&&&&&&&&&&&&&&&&mui.toast(&发表成功&);&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&wt.close();&
&&&&&&&&&&&&&&&&mui.back();&
&&&&&&&&&&&&}&else&{&
&&&&&&&&&&&&&&&&console.log(&上传失败：&&+&status);&
&&&&&&&&&&&&&&&&wt.close();&
&&&&&&&&&&&&}&
&&&&&&&&}&
&&&&var&title&=&$(&#tbxtitle&).val();&
&&&&if&(title.length&&&1)&{&
&&&&&&&&wt.close();&
&&&&&&&&mui.toast(&内容不能为空&);&
&&&&}&else&{&&
&&&&&&&&task.addData(&title&,&title);&
&&&&&&&&task.addData(&uid&,&getUid());&
&&&&&&&&task.addData(&userid&,&plus.storage.getItem(&policeid&));&
&&&&&&&&for&(var&i&=&0;&i&&&files.&i++)&{&
&&&&&&&&&&&&var&f&=&files[i];&
&&&&&&&&&&&&task.addFile(f.path,&{&
&&&&&&&&&&&&&&&&key:&f.name&
&&&&&&&&&&&&});&
&&&&&&&&}&
&&&&&&&&task.start();&
var&index&=&1;&
var&newUrlAfterC&
function&appendFile(p)&{&
&&&&files.push({&
&&&&&&&&name:&&uploadkey&&+&index,&
&&&&&&&&path:&p&
&&&&index++;&
function&getUid()&{&
&&&&return&Math.floor(Math.random()&*&&+&).toString();&
function&getposition()&{&
&&&&plus.geolocation.getCurrentPosition(function(p)&{&
&&&&&&&&var&codns&=&p.&&
&&&&&&&&lat&=&codns.&&
&&&&&&&&longt&=&codns.&&
&&&&},&function(e)&{&
&&&&&&&&provider:&'baidu'&
function&galleryImgs()&{&&
&&&&plus.gallery.pick(function(e)&{&
&&&&&&&&$(&.dynamic_images&ul&li&).remove(&.pickimg&);&
&&&&&&&&for&(var&i&=&0;&i&&&e.files.&i++)&{&
&&&&&&&&&&&&if&(i&&&9)&{&
&&&&&&&&&&&&&&&&picarr[i]&=&e.files[i];&
&&&&&&&&&&&&&&&&$(&.dynamic_images&ul&).prepend(&&li&class='pickimg'&&img&src='&&+&e.files[i]&+&&'&/&&/li&&);&
&&&&&&&&&&&&&&&&var&dstname=&_downloads/&+getUid()+&.jpg&;&
&&&&&&&&&&&&&&&&newUrlAfterCompress=compressImage(e.files[i],dstname);&
&&&&&&&&&&&&&&&&appendFile(dstname);&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}&
&&&&&&&&}&
&&&&},&function(e)&{&
&&&&&&&&console.log(&取消选择图片&);&
&&&&&&&&filter:&&image&,&
&&&&&&&&multiple:&true&
function&compressImage(src,dstname)&{&
&&&&plus.zip.compressImage({&
&&&&&&&&&&&&src:&src,&
&&&&&&&&&&&&dst:&dstname,&
&&&&&&&&&&&&overwrite:true,&
&&&&&&&&&&&&quality:&20&
&&&&&&&&},&
&&&&&&&&function(event)&{&
&&&&&&&&&&&&&
&&&&&&&&&&&&return&event.&
&&&&&&&&},&
&&&&&&&&function(error)&{&
&&&&&&&&&&&&console.log(error);&
&&&&&&&&&&&&return&&
&&&&&&&&&&&&&
&&&&&&&&});&
function&rotateImage()&{&
&&&&plus.zip.compressImage({&
&&&&&&&&&&&&src:&&_www/a.jpg&,&
&&&&&&&&&&&&dst:&&_doc/a.jpg&,&
&&&&&&&&&&&&rotate:&90&&
&&&&&&&&},&
&&&&&&&&function()&{&
&&&&&&&&&&&&alert(&Compress&success!&);&
&&&&&&&&},&
&&&&&&&&function(error)&{&
&&&&&&&&&&&&alert(&Compress&error!&);&
&&&&&&&&});&
function&showActionSheet()&{&
&&&&var&bts&=&[{&
&&&&&&&&title:&&拍照&&
&&&&&&&&title:&&从相册选择&&
&&&&plus.nativeUI.actionSheet({&
&&&&&&&&&&&&cancel:&&取消&,&
&&&&&&&&&&&&buttons:&bts&
&&&&&&&&},&
&&&&&&&&function(e)&{&
&&&&&&&&&&&&if&(e.index&==&1)&{&
&&&&&&&&&&&&&&&&getImage();&
&&&&&&&&&&&&}&else&if&(e.index&==&2)&{&
&&&&&&&&&&&&&&&&galleryImgs();&
&&&&&&&&&&&&}&
&&&&&&&&}&
function&getImage()&{&
&&&&var&cmr&=&plus.camera.getCamera();&
&&&&cmr.captureImage(function(p)&{&
&&&&&&&&plus.io.resolveLocalFileSystemURL(p,&function(entry)&{&
&&&&&&&&&&&&var&localurl&=&entry.toLocalURL();&&
&&&&&&&&&&&&$(&.dynamic_images&ul&li&).remove(&.pickimg&);&
&&&&&&&&&&&&$(&.dynamic_images&ul&).prepend(&&li&class='pickimg'&&img&src='&&+&localurl&+&&'&/&&/li&&);&
&&&&&&&&});&
服务端asp.net版
string&file&=&&&;&
int&count&=&Request.Files.C&
for&(int&i&=&0;&i&&&&i++)&
&&&&int&l&=&Request.Files[&uploadkey&&+&(i&+&1)].ContentL&
&&&&byte[]&buffer&=&new&byte[l];&
&&&&Stream&s&=&Request.Files[&uploadkey&&+&(i&+&1)].InputS&
&&&&System.Drawing.Bitmap&image&=&new&System.Drawing.Bitmap(s);&
&&&&string&imgname&=&Common.GetGuid()&+&&.jpg&;&
&&&&string&path&=&&Images/&&+&DateTime.Now.ToString(&yyyyMMdd&)&+&&/&;&
&&&&if&(!Directory.Exists(HttpContext.Current.Server.MapPath(path)))&
&&&&&&&&System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath(path));&
&&&&image.Save(Server.MapPath(path&+&&/&&+&imgname));&用户自定义图片上传丶裁剪 Cropbox.js 爬坑小记 data:image/base64 数据流转换 · Ruby China
最近在做一个小项目，添加一个用户自定义头像，经过几次尝试，
后来发现 CropBox.js 在图片裁剪及数据展示上很不错，
功能流畅,在体验了几张自己上传的图片后，
一个新的问题出现了，我应该怎么把裁剪后的图片获取并保存，
CropBox.js 会提供一个 crop.getDataUrl 数据流，格式为 "data:image/base64,iV..."
如果直接保存到数据库，会影响页面响应的速度，用户的头像实际只需要一个文件路径即可
不需要这样格式的问题，需要对这个数据流进行转换，还原回裁剪后的图片
转换方法：
data_url = 'data:image/base64,......'
= Base64.decode64(data_url['data:image/base64,'.length .. -1])
File.open("test.png", 'wb') { |f| f.write(png) }
CropBox.js demo 飞机票
我爬过 IE 的坑，IE9以下 不支持 HTML5 FileReader。
好吧，分而治之，IE9 下使用 DXImageTransform.Microsoft.AlphaImageLoader 来读取本地图片。
好的，新问题出现了，这种滤镜展示的图片 不能用来 裁剪。
然后又想到用 Flash 来做，好的，iOS 平台不支持 Flash, 难道又要分而治之？
就一个简单的头像上传而已啊，前前后后花了我两天时间，气死了。
最后老老实实的做：先自动上传用户图片，然后裁剪服务器的图片，没有任何兼容问题，唯一不好的可能是上传文件过大时体验不好。
之前一直对这块不太了解，这次倒是学到了新的小知识
最近开发自己的一个视频小站，图片使用七牛存储，用户头像截取的实现中，
先将图片流以字符串传到后端，后端讲字符串在转义为图片，将图片信息传给七牛服务器
data_url = params[:avatar]
png = Base64.decode64(data_url['data:image/base64,'.length .. -1])
dir_path = "#{Rails.root}/public/"
file_rename = "#{Time.now.to_s}.png"
File.open(dir_path+file_rename, 'wb') { |f| f.write(png) }
您好 我也正在做这块 就是不知道裁剪后怎么上传图片
方便留一下你的QQ吗
请教一下你
同样，受这个问题的困扰，希望楼主能联系
同问，图片裁剪后不知如何上传图片，希望楼主能够解答
后方可回复, 如果你还没有账号请点击这里 。
共收到 6 条回复在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
插件使用的是webuploader
上传前对图片
进行了旋转
怎么保证上传到服务器的图片是经过旋转的
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你要用PS等处理图片的工具旋转处理，你这个旋转并没有真正的旋转图片，图片宽高还是没变化
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有可能是旋转时只修改了Exif信息，并未对像素进行实际的旋转操作。
如果WebUploader开启了客户端js图片压缩，可能会丢失Exif信息，导致服务器端也无法判断。可以在WebUploader压缩之前用其他js库判断一下旋转方向，一起提交给服务器端。如
服务器端需要读取图片的Exif信息，里面有一个Orientation字段存储了图片的旋转方向，需要根据这个字段的值进行旋转后，再进行图片压缩处理。
$image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name']));
$exif = exif_read_data($_FILES['image_upload']['tmp_name']);
if(!empty($exif['Orientation'])) {
switch($exif['Orientation']) {
$image = imagerotate($image,90,0);
$image = imagerotate($image,180,0);
$image = imagerotate($image,-90,0);
// $image now contains a resource with the image oriented correctly
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！实现对上传图片的编辑，裁剪，翻转等，求指导
[问题点数：40分]
实现对上传图片的编辑，裁剪，翻转等，求指导
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年 总版技术专家分年内排行榜第五
2018年5月 总版技术专家分月排行榜第一2018年4月 总版技术专家分月排行榜第一2018年2月 总版技术专家分月排行榜第一2017年8月 总版技术专家分月排行榜第一
匿名用户不能发表回复！|