ASP.NET工作笔记之一：图片上传预览及无刷新上传

转自：http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html

最近项目里面涉及到无刷新上传图片的功能，其实也就是上传一些封面，然后我就想当选择图片的时候，右边出现预览图（在没有上传到服务器的情况下），当点击上传的时候在上传到服务器（无刷新上传），所以也就找了些资料，做了下这方面的功能。

折腾着，折腾着，也就折腾出来啦。现在在这写个笔记。

首先是预览功能，使用了cloudgamer的JavaScript 图片上传预览效果，这里也遇到了些问题，就是我会在File控件的后面设置一个按钮来清空前面File里面的值，并且在预览图片的地方显示默认的图片（是为了项目里面，当这条记录有封面时，则显示他的封面图片）。

JS代码如下：

  //清空File控件的值，并且预览处显示默认的图片
 function clearFileInput()
 {
        var form = document.createElement('form');
        document.body.appendChild(form);
        //记住file在旧表单中的的位置
        var file = document.getElementById("idFile");
        var pos = file.nextSibling;
        form.appendChild(file);
        form.reset();//通过reset来清空File控件的值
       document.getElementById("colspan").appendChild(file);
        document.body.removeChild(form);
        //在预览处显示图片 这是在浏览器支持滤镜的情况使用的
       document.getElementById("idImg").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='images/abshiu.jpg'";
        //这是是火狐里面显示默认图片的
      if (navigator.userAgent.indexOf('Firefox') >= 0)
       {
            $("#idImg").attr('src', 'images/abshiu.jpg');
        }
    }

HTML代码如下：

<table border="0" class="perview">
       <tr>
            <th width="45%">选择文件</th>
            <th width="45%">预览图</th>
            <th width="10%">上传图片</th>
       </tr>
       <tr>
           <td><span id="colspan"><input id="idFile" runat="server" name="pic" type="file" /></span>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="resets" name="resets" value="还原" onclick="clearFileInput()" />
          </td>
          <td align="center"><img id="idImg" src="data:images/abshiu.jpg" />
          </td>
          <td><input type="button" name="resets" value="上传保存图片" onclick="upLoadFile()" />
          </td>
      </tr>
 </table>
 <script>

        var ip = new ImagePreview($$("idFile"), $$("idImg"), {
            maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
        });
        ip.img.src = ImagePreview.TRANSPARENT;
        ip.file.onchange = function() { ip.preview(); };
    </script>

做到这里的话 预览效果就已经搞定啦，然后就是无刷新上传，虽然cloudgamer的博客里面有简便无刷新文件上传系统，但是我没有采用，而是使用了jquery.form.js来做无刷新上传效果，代码如下：

function upLoadFile()
 {
        var options = {
            type: "POST",
            url: 'Files.ashx',
            success: showResponse
        };

        // 将options传给ajaxForm
        $('#myForm').ajaxSubmit(options);
    }
 function showResponse()
 {
        alert("上传成功!");
 } 

关于jquery.form.js的API，百度下吧。#myForm就是页面的form的ID，Files.ashx则负责图片的上传处理,Files.ashx的代码如下：

public class File_WebHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        HttpFileCollection files = context.Request.Files;
        if (files.Count > 0)
        {
            Random rnd = new Random();
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];

                if (file.ContentLength > 0)
                {
                    string fileName = file.FileName;
                    string extension = Path.GetExtension(fileName);
                    int num = rnd.Next(5000, 10000);
                    string path = "file/" + num.ToString() + extension;
                    file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(path));
                }
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

代码到这里一个简单的例子也就完成啦。附上小例子的源码：

图片上传预览及无刷新上传