html jsp asp.net 通用图片上传实现方法

在实际开发中，无论碰到app上传图片，还是bs前端上传图片，都是一个比较复杂的事情。
当然上传图片可以采用多种模式，例如,tcp/udp分包上传，websocket上传。但是兼容性最高的肯定是基于http通信实现的图片上传。
经过一段时间的研究，实现了通用性的图片上传服务端以及html端。

图片上传的原理，就是基于http的文件数据流上传。前端实现多种多样。
在这里，我就列举一种最简单的模式，使用layui上传，抛砖引玉。各位看官也可以使用h5自带的图片上，实现模式雷同。
不多废话了。上代码：

以下是前端html的核心代码。

    layui.use('upload', function () {
        var $ = layui.jquery
        , upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
          , url: 'Up.ashx' //改成自己的上传接口，
          , before: function (obj) {
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {
                  $('#demo1').attr('src', result); //图片链接（base64）
              });
          }
          , done: function (res) {
              //如果上传失败
              if (res.code > 0) {
                  return layer.msg('上传失败');
              }
              //上传成功
          }
          , error: function () {
              //演示失败状态，并实现重传
              var demoText = $('#demoText');
              demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              demoText.find('.demo-reload').on('click', function () {
                  uploadInst.upload();
              });
          }
        });
    });

至于服务端，目前采用 asp.net的模式实现图片上传接口，实现的功能如下：
1.可是同时支持多张图片的上传。
2.图片会存到服务端img的文件夹下面。
3.上传结果，会以json的模式给出，其中包含了，对应图片的url等关键信息。

                for (int i = 0; i < fileCount; i++)
                {
                    string fileName = HttpContext.Current.Request.Files[i].FileName;
                 
                    string imgFile = "img/" + fileName;
                    string filePath = HttpContext.Current.Server.MapPath(imgFile);
                    byte[] byts = new byte[HttpContext.Current.Request.Files[i].InputStream.Length];
                    HttpContext.Current.Request.Files[i].InputStream.Read(byts, 0, byts.Length);
                    FileStream fStream = new FileStream(filePath, FileMode.Create, FileAccess.Write);
                    BinaryWriter bw = new BinaryWriter(fStream);
                    bw.Write(byts);
                    bw.Close();
                    fStream.Close();

                    CImgmodel imgmodel = new CImgmodel();
                    imgmodel.fileName = fileName;
                    imgmodel.fileUrl = System.Configuration.ConfigurationManager.AppSettings.Get("imgurl").Trim() + fileName;
                    imglist.Add(imgmodel);
                }

服务端核心代码，思路如下：
1.首先根据收到的图片总数，开始循环进行处理图片。
2.使用流的模式将图片读出来，并且写入本地某个文件夹。
3.生成http图片地址，并保存起来。
4.最后，将整个图片上传结果封装成json对象返回到客户端（里面包含图片名字，图片http地址）。
至此大功告成。

因为代码量比较大，如有需要，请点击一下链接去下载完整的代码示例，验证可直接使用到项目中。
上传图片测试代码