用html实现图片上传 后台采用.net其中在这里要借用一个js插件

在这里我会写一个图片上传的一个小Demo，有不全的地方多多包容,和提议，

我把已经写好的demo已经上传到百度云 在这里可以下载  http://pan.baidu.com/s/1bG2934

开始 html中的内容是

<body>
<div>
<div>
<img src="data:images/photo.jpg" id="user_head" width="140" height="140" />
<p>
图片格式：GIF、JPG、JPEG、PNG<br />
图片大小：最高不超过500K
</p>
<div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>

</div>
</div>
</body>

其中在

<link href="js/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/webuploader-0.1.5/webuploader.js"></script>
<script>
$(function () {

var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径
swf: 'js/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: 'ashx/fileupload.ashx',
// 选择文件的按钮。可选。<a href="js/webuploader/server/fileupload.ashx">js/webuploader/server/fileupload.ashx</a>
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'
},
});
//上传成功触发事件
uploader.on('uploadSuccess', function (file, response) {
$("#user_head").attr("src", response.id);
});
//上传前触发事件
uploader.on( 'fileQueued', function( file ) {
uploader.options.formData = { src: $("#user_head").attr("src") == "images/photo.jpg" ? "" : $("#user_head").attr("src") };
})
})
</script>

然后还没写完 明天再更新可以先再百度云看小Demo

jQuery File Upload 参考API:  http://fex.baidu.com/webuploader/doc/

.Net Html如何上传图片到一般应用程序的更多相关文章

  1. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  2. 微信小程序 setData动态修改数据数组的值

    1.问题说明 有一组数据,用来存储图片路径,动态修改图片的路径来上传图片,而小程序JS只能通过事件获取时机和setData方法修改数据来改变view. 而用这样写的方式明显是错误的 2.解决办法 字符 ...

  3. 前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https

    一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1 ...

  4. qibocms /hr/listperson.php File Arbitrarily Include Vul Via Variable Uninitialization && Front Page Upload WEBSHELL

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Relevant Link:2. 漏洞触发条件 . 找到前台文件上传点 ...

  5. form、iframe实现异步上传文件

    转载自:http://blog.csdn.net/sunjing21/article/details/4779321 实现主要功能: 页面提供一个上传图片的input file选择框,用于上传某一类型 ...

  6. gearman安装及初次使用

    官网:  http://gearman.org/ 一篇文章: 利用Gearman实现异步任务处理 一.问题分析 问题:在性能测试过程中,发现用户管理平台在进行图片上传时,性能不佳. 分析:经过代码分析 ...

  7. Thinkphp编辑器扩展类kindeditor用法

    一, 使用前的准备. 使用前请确认你已经建立好了一个Thinkphp站点项目. 1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的Th ...

  8. iis虚拟目录引发的路径问题

    在iis上把web程序配置成站点是ok的,但配置成虚拟目录,就会发现 图片路径不能,样式不能加载,链接出错. 解决方案: 1,上传图片  ~/upload 2,cs程序,链接跳转,请用~/index. ...

  9. C#中资源文件的使用

    在程序中会用到图片,有两种方法,一种是将图片放在运行文件夹中,直接调用,另一种是将图片放入资源文件中. 方法一,一般在.exe文件同级创建文件夹,如“ico”,然后把图标放进去.在程序中代码采用相对路 ...

随机推荐

  1. 记录我这一年的技术之路(nodejs纯干货)

    2015年12月28日23:19:54 更新koa应用.学习型网站和开发者工具等 coding伊始 开始认认真真的学习技术还是2015.10.21日开始的,记得很清楚,那天,是我在龙湖正式学习的第一天 ...

  2. 重新认识了下Entity Framework

    什么是Entity Framework Entity Framework是一个对象关系映射O/RM框架. Entity Framework让开发者可以像操作领域对象(domain-specific o ...

  3. 卸载oracle之后，如何清除注册表

    之前卸载了oracle,今天偶然间发现,在服务和应用程序里面,还残存着之前的oracle服务.原来,还需要去清理下注册表. 在开始菜单的这个框里面 输入regedit,进入注册表.找到这个目录 HKE ...

  4. [译]处理文本数据(scikit-learn 教程3)

    原文网址:http://scikit-learn.org/stable/tutorial/text_analytics/working_with_text_data.html 翻译:Tacey Won ...

  5. [数据结构]——堆（Heap）、堆排序和TopK

    堆(heap),是一种特殊的数据结构.之所以特殊,因为堆的形象化是一个棵完全二叉树,并且满足任意节点始终不大于(或者不小于)左右子节点(有别于二叉搜索树Binary Search Tree).其中,前 ...

  6. Kotlin中变量不同于Java： var 对val（KAD 02）

    原文标题:Variables in Kotlin, differences with Java. var vs val (KAD 02) 作者:Antonio Leiva 时间:Nov 28, 201 ...

  7. 【Java并发编程实战】-----“J.U.C”：Exchanger

    前面介绍了三个同步辅助类:CyclicBarrier.Barrier.Phaser,这篇博客介绍最后一个:Exchanger.JDK API是这样介绍的:可以在对中对元素进行配对和交换的线程的同步点. ...

  8. 详解前端模块化工具-webpack

    webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...

  9. wx.onMenuShareTimeline使用注意事项

    我在开发测试过程中,发现使用wx.onMenuShareTimeline无效果,没有显示我定义的图片.title和链接,经过调试发现原因如下: 1.图片大小要大于300pix才能显示 2.这个方法必须 ...

  10. direction和unicode-bidi

    在做多语言页面,接触过阿利伯语.希伯来语的同学肯定了解书写方向的重要性,包括我们五四运动前的书写顺序也是从右到左的.css中 unicode-bidi和direction属性决定了HTML或XML文字 ...