电影《昆塔:昆塔反转星球tfboys》,百度云链接。谢谢大神!

[ASP.NET MVC] MVC手机端页面使用标签file图片上传到后台处理 | IT知识库
-& 正文阅读
[ASP.NET MVC]MVC手机端页面使用标签file图片上传到后台处理
MVC手机端页面使用标签file图片上传到后台处理
&&& 最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了;如果对样式没有太大的要求我感觉使用这个就足够了;下面来说一下实现的思路和方法。&&
这个是我最初想做的一个样式;由于时间和精力的原因放弃了,做了一个下面的样式
哈哈 这是原始的样式没有做过任何的修改,不过看着还行,因为这个标签是调用的手机系统自己的插件和样式下面就一步一步的写一下实现方式:第一步HTML 标签的
&label class="section_label"&头像&/label&
&span class="section_right"&
&img src="~/Content/images/icon_head.png" alt="1" height="60px" /&
@using (Html.BeginForm("uploadHead", "MemberInfo", FormMethod.Post, new { ID = "user_head_form", enctype = "multipart/form-data" }))
&input type="file" name="head" accept="image/*" class="filebtn" id="headUpdate" style="display:" /&
&input type="file" name="head" accept="image/*" class="filebtn" id="headUpdate" style="display:" /& 这个就是图片上传的标签;实现思路:点击 img 标签的时候 触发 input file 标签 弹出选择图片框,选择完图片后实现图片上传步骤;第二步: 点击 imag 触发 input JS 代码
在写js 代码之前需要引用一个jquery-form.js文件,实现submit 提交之后接受返回的JSON数据
//上传图片
$("#headImage").click(function(){
function upload(){
$("#headUpdate").click();
$("#headUpdate").unbind().change(function(){
//$("#user_head_form").submit();
$("#user_head_form").ajaxSubmit({
url:'@Url.Action("uploadHead")',
type:"post",
dataType:"json",
success:function(json){
if (json.Success) {
$("#headImageURL ").attr("src",json.Path);
alert(json.Msg);
}第三步:后台的处理& 将图片上传到后台,后台可以图片上传的服务器,或者保存到本地都可以操作;我是直接将图片转为byte 类型的 直接传到接口服务器上了
[HttpPost]
public ActionResult uploadHead()
MemberBLL mb = new MemberBLL();
MoPhoto mp = new MoPhoto();
HttpPostedFile file = System.Web.HttpContext.Current.Request.Files[0];
if ((file == null))
return Json(new { Success = false, Msg = "上传图片失败", Path = "" });
System.Drawing.Image image = System.Drawing.Image.FromStream(file.InputStream);
MemoryStream ms = new MemoryStream();
image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
byte[] byteData = new byte[ms.Length];
ms.Position = 0;
ms.Read(byteData, 0, byteData.Length);
ms.Close();
image.Dispose();
//修改头像
mp = mb._UpdateHeadPortrait(new MoHeadPortraitRequest()
JSJID = this.LoginModel.JSJID,
HeadPorTraitByte = byteData
return Json(new { Success =
mp.BaseResponse.IsSuccess, Msg = mp.BaseResponse.ErrorMessage, Path = mp.PhotoPath });
catch (Exception)
return Json(new { Success = false, Msg = "上传图片失败", Path = "" });
}ok,这样就可以轻松的实现了 手机端头像的上传功能了;第一张的图片的实现效果,希望哪位大神们有实例或者资料给我提供一下,相互学习嘛。谢谢
加: 17:43:39&
更: 17:43:41&
&&网站联系: qq: email:&如何让用户在页面上传图片_百度h5吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
如何让用户在页面上传图片收藏
求解,如何让用户在页面上传图片
@百度H5认证吧主
目前还不支持,请期待后续更新。
登录百度帐号推荐应用
为兴趣而生,贴吧更懂你。或匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。怎么做那种可以让用户上传图片并且后台可以接收的h5
ex8&&& 01:05:04
您好,易企秀没有这个功能
<font color=#积分
<font color=#金币
<font color=#帖子
公告1234567最新帖子12345678910最新精华12345678910
易企秀荣誉勋章
此勋章奖励给热心于论坛发展并做出突出贡献的秀粉
易企秀工作人员
易企秀工作人员

我要回帖

更多关于 昆塔反转星球豆瓣 的文章

 

随机推荐