.Net简单图片系统-使用说明

使用说明

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简单图片系统-使用说明

使用说明

图片系统项目结构

注意

相关文章