使用说明

1. 从github上获取代码,并部署到IIS中,应用程序池选择4.0.
2. 打开配置文件,在AppSettings中,设置SaveMode模式,如果选择的Distributed模式,需要安装FastDFS(FastDFS的安装参考下篇博客),并配置section信和fastdfs节点信息。这里选择Local模式.
3. 新建测试站点和测试页面。
4. 打开测试页面,修改如下,注意http://localhost:8090/ 是我部署的图片服务器地址,这里修改为你自己的图片服务器地址。 
<link href="http://localhost:8090/Content/style.css" rel="stylesheet" />
<link href="http://localhost:8090/Content/webuploader.css" rel="stylesheet" /> <div id="uploader-demo">
<!--用来存放item-->
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div> <input type="text" id="filename" style="width:600px" />
<script src="~/Content/jquery-1.10.1.min.js"></script> <script src="http://localhost:8090/Content/webuploader.js"></script>
<script src="http://localhost:8090/Content/UploadInit.js"></script>
<script>
jQuery(function () {
UploadInit('fileList', 'filePicker', 'filename', 'http://localhost:8090/');
});
</script>
5. 打开页面浏览,可以看到如图所以效果
6. 选择图片后自动上传,上传成功后便可在下方的文本框中看到图片绝对地址。 
    如果是本地模式,可以看到保存的路径中含有业务系统域名信息(这里是localhost, 如果业务域名为userservice.test.com则保存的地址为com\test\userservice), 还含有图片上传时间信息。 这里localhost:8090是图片服务器地址。
 
   如果是基于FastDFS的,文件名是FastDFS控制生成的,192.168.1.104是fastdfs的tracker服务器地址。
 
完成以上步骤,你会发现我们新建的测试站点服务端没有做任何编码,仅仅是在页面端添加了一些外部样式和外部脚本就完成了整个的图片上传,返回的图片绝对地址,可以放在一个Hidden中,然后和其他信息一起提交Post到业务服务端。在查看图片的时候,浏览器再根据这个绝对地址去图片服务器上请求。 

图片系统项目结构

项目结构非常简单,就是一个Web API站点,Content文件夹中是百度webuploader组件,Controllers中也只有一个Controller,用于接收图片,保存图片,代码也都非常简单,这里不做介绍。
 

注意

1. 这里上传组件使用了百度的webuploader,样式和上传方式你可以参考官方API实现自定义。其他的还可以使用swfupload或者其他的组件,只要将图片提交地址改为图片服务器地址就可以了。 
2. 因为使用的是CORS方式提交,部分浏览器会不兼容,所以需要有个适配机制,判断如果是IE6,就采用适合IE6的方式来提交,服务端要兼容Get提交, 这一块暂未实现。 
3. CORS提交需要有一个认证的过程, 为了安全建议Access-Control-Allow-Origin不要设置为 *,而要设置为允许的站点域名。
4. 通过时间来命名图片名称有一定的安全隐患, 前端可以通过遍历时间来获取图片,如果对图片有安全要求,建议再加上4位-6位不等的随机数, 或者使用Guid方式。

.Net简单图片系统-使用说明的更多相关文章

  1. .Net简单图片系统-简介

    系统简介 最近做了一个简单图片系统,这个系统就是 将上传的的图片保存到系统本地文件系统或者基于fastdfs的分布式文件系统中,在查看图片时会直接请求此系统或者fastdfs的tracker服务器(需 ...

  2. .Net简单图片系统-本地存储和分布式存储

    本地存储 所谓本地存储就是将上传图片保存到图片服务器的本地磁盘上. if (ConfigHelper.GetConfigString("SaveMode") == "Lo ...

  3. 升鲜宝V2.0_杭州生鲜配送行业,升鲜宝供应链B端订货系统使用说明_升鲜宝生鲜供应链管理系统_15382353715_余东升

    升鲜宝V2.0_杭州生鲜配送行业,升鲜宝供应链B端订货系统使用说明_升鲜宝生鲜供应链管理系统_15382353715             升鲜宝生鲜配送供应链系统经过这些年的发展,形成一套独特的订 ...

  4. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. 用Qt写软件系列三:一个简单的系统工具(上)

    导言 继上篇<用Qt写软件系列二:QIECookieViewer>之后,有一段时间没有更新博客了.这次要写的是一个简单的系统工具,需求来自一个内部项目.功能其实很简单,就是查看当前当前系统 ...

  6. 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)

    使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...

  7. Ubuntu学习笔记-win7&Ubuntu双系统简单搭建系统指南

    win7&Ubuntu双系统简单搭建系统指南 本文是自己老本子折腾Ubuntu的一些记录,主要是搭建了一个能够足够娱乐(不玩游戏)专注练习自己编程能力的内容.只是简单的写了关于系统的安装和一些 ...

  8. Arbiter 系统使用说明

    Arbiter 系统使用说明 Overview Arbiter是NOI系列赛事的官方评测软件, 由北航的相关人员开发. 在OIer会经历的几场大型比赛中, 除了省选和PKUSC/THUSC不使用Arb ...

  9. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

随机推荐

  1. Oracle Latch的学习【原创】

    Latch详解 - MaxChou 本文以学习为目的,大部分内容来自网络转载. 什么是Latch 串行化 数据库系统本身是一个多用户并发处理系统,在同一个时间点上,可能会有多个用户同时操作数据库.多个 ...

  2. Docker是什么

    Docker是什么 相信我们很多人都使用多VM(Virtual Machine),也就是虚拟机,简单的来说Docker就是类是于VM的容器,但Docker要轻量得多,VM(Virtual Machin ...

  3. CentOS6.5搭建LNMP

      1:查看环境: ? 1 2 [root@10-4-14-168 html]# cat /etc/redhat-release CentOS release 6.5 (Final) 2:关掉防火墙 ...

  4. 参加 Tokyo Westerns / MMA CTF 2nd 2016 经验与感悟 TWCTF 2016 WriteUp

    洒家近期参加了 Tokyo Westerns / MMA CTF 2nd 2016(TWCTF) 比赛,不得不说国际赛的玩法比国内赛更有玩头,有的题给洒家一种一看就知道怎么做,但是做出来还需要洒家拍一 ...

  5. 使用virt-manager创建和管理虚拟机

    1.虚拟机管理程序和虚拟机管理 一个服务器上只安装单一操作系统的时代已经过去,单个服务器可通过安装多个虚拟机来运行不同操作系统.虚拟机的大量使用减少了所需的服务其硬件,降低了服务器的功耗,但却带来了另 ...

  6. 在Solr中配置和使用ansj分词

    在上一节[编译Ansj之Solr插件]中介绍如何编译ansj分词在solr(lucene)环境中使用的接口,本章将介绍如何在solr中使用ansj,其步骤主要包括:下载或者编译ansj和nlp-lan ...

  7. Servlet分页技术

    这是看韩顺平老师的servlet视频,自己动手写的,楼主看韩顺平老师的servlet是2006制作的,用的是sql server数据库,自己又用的是oracle数据库,所以怕有的同学遇到同样的问题,不 ...

  8. Codevs1378选课[树形DP|两种做法(多叉转二叉|树形DP+分组背包)---(▼皿▼#)----^___^]

    题目描述 Description 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修 ...

  9. AC日记——鬼谷子的钱袋 codevs 2998

    2998 鬼谷子的钱袋 2006年省队选拔赛湖南  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master    题目描述 Description 鬼谷子非常聪明,正 ...

  10. 未找到数据,异常处理:exception when no_data_found then 异常处理语句;

    未找到数据. 在 select 字段 Into 变量 from 表 where 条件: 这种语句中很有可能会有select 不到数据的问题,导致报错"未找到数据" 要解决这种问题需 ...