Jquery图片上传功能整理

最近在做一个图片上传到服务器的功能，之前基本没有什么JS的经验，用的也是网上的插件。做了一个星期才把他弄好，现在做一下总结，方便以后查看。

用的插件是WebUploader，上面有很多例子，我找的例子如下图：

在实例化WebUploader的时候需要修改upload.js文件中的server的地址，这样才能将指定的图片上传到服务器代码如下：

     // 实例化
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: 'Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server:'Handler1.ashx',//用来处理上传图片的服务
            // runtimeOrder: 'flash',
            //文件过滤
             accept: {
                 title: 'Images',
                 extensions: 'gif,jpg,jpeg,bmp,png',
                 mimeTypes: 'image/*'
             },
        });

需要注意的是，Handler1.ashx是一个处理上传图片的服务，用于将上传的图片保存到服务器上，文件代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;

namespace JQueryUploadDemo
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";
            HttpPostedFile file = context.Request.Files["Filedata"];
            string  uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";
            if (file != null)
            {
               if (!Directory.Exists(uploadPath))
               {
                   Directory.CreateDirectory(uploadPath);
               }
               file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
               context.Response.Write("");
            }
            else
            {
                context.Response.Write("");
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

完成上传时候，前端需要获取服务器返回的数据，用于保存在数据库，找了半天，最后在webuploader.js的_finishFile函数中找到了，这里只显示部分代码：

// 完成上传。
            _finishFile: function( file, ret, hds ) {
                var owner = this.owner;
                postfilename=ret._raw;//获取服务器返回的参数
                return owner
                        .request( 'after-send-file', arguments, function() {
                            file.setStatus( Status.COMPLETE );
                            owner.trigger( 'uploadSuccess', file, ret, hds );
                        })
                        .fail(function( reason ) {

                            // 如果外部已经标记为invalid什么的，不再改状态。
                            if ( file.getStatus() === Status.PROGRESS ) {
                                file.setStatus( Status.ERROR, reason );
                            }

                            owner.trigger( 'uploadError', file, reason );
                        })
                        .always(function() {
                            owner.trigger( 'uploadComplete', file );
                        });
            },

获取返回的数据之后需要将数据传递到upload.js里面，用于保存到数据库中，upload.js中有stats = uploader.getStats()，是获取返回的一些信息的，在updateStatus函数

下面会贴出代码。但是stats对象中没有获取服务器返回的参数，只返回了上传的基本信息，这时候就需要在webuploader.js中的Queue函数中添加postfilenames属性，方法部分代码如下:

      function Queue() {

            /**
             * 统计文件数。
             * * `numOfQueue` 队列中的文件数。
             * * `numOfSuccess` 上传成功的文件数
             * * `numOfCancel` 被取消的文件数
             * * `numOfProgress` 正在上传中的文件数
             * * `numOfUploadFailed` 上传错误的文件数。
             * * `numOfInvalid` 无效的文件数。
             * * `numofDeleted` 被移除的文件数。
             * * `postfilenames` 用来保存返回的文件名
             * @property {Object} stats
             */
            this.stats = {
                numOfQueue: 0,
                numOfSuccess: 0,
                numOfCancel: 0,
                numOfProgress: 0,
                numOfUploadFailed: 0,
                numOfInvalid: 0,
                numofDeleted: 0,
                numofInterrupt: 0,
                postfilenames:new Array()
            };

这个时候就可以在upload.js中的updateStatu方法中将返回的数据写入到数据库中，函数代码如下：

 function updateStatus() {
            var text = '', stats;
            if ( state === 'ready' ) {
                text = '选中' + fileCount + '张图片，共' +
                        WebUploader.formatSize( fileSize ) + '。';
            } else if ( state === 'confirm' ) {
                stats = uploader.getStats();
                if (stats.uploadFailNum) {
                    text = '已成功上传' + stats.successNum+ '张照片，'+
                        stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
                }
            } else {
                stats = uploader.getStats();
                AddImageInfo(stats);//自己添加的函数，将图片信息写入到数据库
                text = '共' + fileCount + '张（' +
                        WebUploader.formatSize( fileSize )  +
                        '），已上传' + stats.successNum + '张';

                if ( stats.uploadFailNum ) {
                    text += '，失败' + stats.uploadFailNum + '张';
                }
            }
            $info.html( text );
        }

自己定义了一个函数用于将数据保存在在数据库中，这里用的是ajax和webservice写入到数据库中的，函数代码如下：

        //将图片信息写入到数据库
        function AddImageInfo(stats)
        {
         for (var i = 0;i<stats.postfilenames.length;i++){
                var serverUrl = "http://localhost:8888/XXXXX.asmx";
                $.ajax({
                    type: 'POST',
                    url: serverUrl + '/XXXXXX',
                    data: '{ stationAttas:' + stats[i].postfilenames[i] + '}',
                    datatype: "json",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    success:
                     function (data) {//调用服务成功后返回的数据
                         alert(data);
                     },
                    error: function (XMLHttpRequest, textStatus) {
                        alert("XMLHttpRequest.state:" + XMLHttpRequest.state + "-XMLHttpRequest.readyState:" + XMLHttpRequest.readyState + "-textStatus:" + textStatus + "-XMLHttpRequest.responseText:" + XMLHttpRequest.responseText);
                    }
                })
           }
        }

这样就把一个图片上传的功能实现了。另外一个随笔会介绍如何管理上传的图片。

最近在也在做ArcGIS For Js 的缓冲区查询功能功能，里面也有和一样的功能，顺便记录一下。

在使用缓冲区查询的时候，执行execute函数是，错误函数会弹出如下图所示的提示：

这个是因为：query.geometry是个多边形（含有的point多）导致的web service的url的参数个数大于2048个，而我们这里采用的是get方式（最大的字符数为2048）不是post方式，需要proxy.ashx做处理，需要两个文件proxy.ashx和proxy.config，下载地址 两个文件需要放在IIS中。在调用查询函数前加入下面两句代码即可。

  esriConfig.defaults.io.proxyUrl = "http://localhost/proxy.ashx";
  esriConfig.defaults.io.alwaysUseProxy = false;

proxy.config代码如下：

<ProxyConfig mustMatch="true">
  <serverUrls>
    <!-- serverUrl options:
            url = location of the ArcGIS Server, either specific URL or stem
            matchAll = true to forward any request beginning with the url
            token = (optional) token to include for secured service
    -->
    <serverUrl url="http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"
  matchAll="true"
  token=""></serverUrl>
    <serverUrl url="http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"
              matchAll="true"
              token=""></serverUrl>
    <serverUrl url="http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"
               matchAll="true"></serverUrl>
    <serverUrl url="http://localhost:6080/arcgis/rest/services/Findtask/MapServer/0"
               matchAll="true"></serverUrl>
  </serverUrls>
</ProxyConfig>