关闭

net 预览上传图片

标签: netmvc图片上传
196人阅读 评论(0) 收藏 举报
分类:

首先给大家看一下上传图片的预览效果:

1.第一步,页面布局(如下图片)


分析代码:(1)、form:表单 ,post:提交, 编码方式:enctype,

                    (2)、multipart/from-data(区别与post,大家先参考下https://my.oschina.net/cnlw/blog/168466这个网站)

                   (3)、fieldset 与legend只是图片预览框的样式。(如果不习惯可以用div代替)

2.第二步:脚本支撑

                (1)、大家可以从网络上下载js--jquery-1.7.1.js

     (2)、大家可以在项目新建MVC项目,使用它的js脚本(如下图)

       

(3)、还可以使用esayUI的脚本(如下图)


3.第三步:脚本方法,提交方法和预览方法

(1)、点击提交按钮,调ImgSubmit()方法

      (2)页面加载查看预览图片是否显示

4第四步,最重要的一步:调取后台的代码

   

      (1)、UpLoad()上传方法

            file:获取文件请求类型。

           path:获取保存目录的物理路径。


欢迎大家来借鉴,如果有什么意见不同之处,欢迎大家联系我。

1
0
查看评论

.net web实现选择本地图片(上传)后预览图

.net web实现选择本地图片(上传)后预览图 html: js: function onFileChange(sender) { document.getElementById("fuPiccropper").src = window.URL.createObjectU...
  • MajorMayer
  • MajorMayer
  • 2016-01-11 12:33
  • 1058

asp.net下上传图片加实时预览

html<div style="position: relative;"> <img id="uploadPreview" style="width: 100p...
  • Cuideguo
  • Cuideguo
  • 2016-01-15 15:33
  • 1283

Asp.net上传图片产生预览效果

1在页面上放入一个上传控件和一个图片控件. asp:FileUpload ID="FileUpload1" runat="server" onpropertychange="show(this.value)&q...
  • lem12
  • lem12
  • 2008-03-07 14:13
  • 9919

ASP.NET MVC图片上传前预览

今年的学习计划是学好ASP.NET MVC和jQuery,多练习,不懂的去网上找或是多看书! 早上有练习图片上传前预览并获取图片文件名和图片字节大小。 在控制器中创建一个Action:   在Views目录下对应的控制器名称下创建视图PreViewing: ...
  • linybo
  • linybo
  • 2015-03-27 14:07
  • 1517

asp.net上传图片,保存文件名和路径,并利用javascript显示图片预览

FileUpload控件   属性: FileName: 获取上传的文件名 HasFile: 是否选择(存在)上传的文件 ContentLength: 获得上窜文件的大小,单位是字节(byte)   方法: Server.MapPath(): 获取服务器上...
  • G1036583997
  • G1036583997
  • 2014-01-17 11:55
  • 8557

基于asp.net + easyui框架,js实现上传图片之前判断图片格式,同时实现预览,兼容各种浏览器+下载

最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多。在上传图片之前验证图片的格式,并同时实现预览。这篇博客我们就用一段简单的js代码来实现验证图片格式,并同时预览的功能。 js代码 //检查图片的格式是否正确,同时实现预览 fu...
  • jiuqiyuliang
  • jiuqiyuliang
  • 2014-01-29 18:31
  • 21242

用javascript实现图片上传并预览

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome,FF,IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候ie9-老是显示不了图片。我以为是方法出现问题。于是找度娘,找谷歌;几乎都是这样实现的。搞了好久,都...
  • baidu_24024601
  • baidu_24024601
  • 2016-04-28 17:34
  • 6039

H5图片预览及上传(WEB前端)

H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧。 一、html布局文件 html有一个自己的上传文件控件---input,只需要将其type属性设置为file即可上传文件,accept=“im...
  • u014155882
  • u014155882
  • 2017-02-06 11:18
  • 3008

easyui js 上传图片加预览功能

选择图片: 预  览: //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new A...
  • shiyanlong0546
  • shiyanlong0546
  • 2015-05-12 16:46
  • 1122

angularjs上传图片预览

app.factory("fileReader", function($q, $log) {             var onLoad = function(reader, deferred, scope)...
  • zx007fack
  • zx007fack
  • 2014-11-13 09:10
  • 7107
    个人资料
    • 访问:1768次
    • 积分:94
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档