现在的位置: 首页 > 综合 > 正文

在html文件里使用JQuery上传图片

2013年04月10日 ⁄ 综合 ⁄ 共 4616字 ⁄ 字号 评论关闭

该实现是参看http://www.cnblogs.com/wutao/archive/2010/01/28/1658496.html里的批量上传文件,对其进行了修改;整个过程是选择一张图片,然后对这张图片进行预览,当图片过大时不能预览(在uploadPreview.js文件里有限制大小),最后点击上传则进行上传;请先下载:jquery;导入到.html文件里

<script language="javascript" src="../js/jquery.js"></script>
<script language="javascript" src="../js/uploadPreview.js"></script>

然后写:

<script language="javascript">

 $(document).ready(function() {
        //图片预览
        $("#imgfile").uploadPreview({ imgDiv: "#imgDiv", imgType: ["bmp", "gif", "png", "jpg"], maxwidth: 250, maxheight: 250 });

   //上传图片
        $("#btnUpload").click(function() {
            $.post("exec/UploadFile.ashx", { upfile: getPath($("#imgfile")) }, function(json) {

               //json.result为upload.ashx文件返回的值
                alert(json.result);
            },"json");
        });

});

</script>

<body>

 <input type="file" id="imgfile" />
<input type="button" id="btnUpload" value="上传图片" />

<div id="imgDiv" runat="server"></div> //显示预览图片

</body>

 

接下来:

在项目里添加一个一般处理程序:Handler1.ashx,把其改名为:UploadFile.ashx,在此应引用Newtonsoft.Json.dll,下载:/Files/KimhillZhang/json.rar

代码如下:

 

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

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

namespace TianzhiguWebSite.Web.admincp.exec
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class UploadFile : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //源图片路径
            string _fileNamePath = "";
            try
            {
                _fileNamePath = context.Request["upfile"].ToString();
                string _savedFileResult = uploadFile(_fileNamePath); //开始上传
                //把编译成的json格式返回到前台
                context.Response.Write(uploadFileResult(_savedFileResult));
                
            }
            catch
            {
           
            }
        }
        private string uploadFile(string filenamePath)
        {
            //图片格式
            string fileNameExit = filenamePath.Substring(filenamePath.IndexOf('.')).ToLower();
            if (!checkfileExit(fileNameExit))
            {
                return "图片格式不正确";
            }
            //保存路径
            string toFilePath = "UploadFiles/";
            //物理完整路径
            string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath);
            //检查是否有该路径,没有就创建
            if (!Directory.Exists(toFileFullPath))
            {
                Directory.CreateDirectory(toFileFullPath);
            }
            //生成将要保存的随机文件名
            string toFileName = getFileName();

            //将要保存的完整路径
            string saveFile = toFileFullPath + toFileName + fileNameExit;

            //创建WebClient实例
            WebClient myWebClient = new WebClient();
            //设定window网络安全认证
            myWebClient.Credentials = CredentialCache.DefaultCredentials;

            //要上传的文件
            FileStream fs = new FileStream(filenamePath, FileMode.Open, FileAccess.Read);

            BinaryReader br = new BinaryReader(fs);
            //使用UploadFile方法可以用下面的格式
            myWebClient.UploadFile(saveFile, filenamePath);

            return "图片保存成功";
        }
        /// <summary>
        /// 检查图片格式
        /// </summary>
        /// <param name="_fileExit">文件后缀名</param>
        /// <returns></returns>
        private bool checkfileExit(string _fileExit)
        {
            string[] allowExit = new string[] { ".gif", ".jpg", ".png" };//判断文件类型
            for (int i = 0; i < allowExit.Length; i++)
            {
                if (allowExit[i] == _fileExit)
                {
                    //符合文件类型则返回true;
                    return true;
                }
            }
            return false;
        }
        /// <summary>
        /// 得到随机的文件名
        /// </summary>
        /// <returns></returns>
        public static string getFileName()
        {
            Random rd = new Random();
            StringBuilder serial = new StringBuilder();
            serial.Append(DateTime.Now.ToString("yyMMddHHmmssff"));
            serial.Append(rd.Next(0, 9999).ToString());
            return serial.ToString();
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        //把返回值编译成json格式
        public string uploadFileResult(string result)
        {
            StringBuilder sb = new StringBuilder();
            StringWriter sw = new StringWriter(sb);
            using (JsonWriter jswriter = new JsonTextWriter(sw))
            {
                jswriter.Formatting = Formatting.Indented;
                jswriter.WriteStartObject();
                jswriter.WritePropertyName("result");
                jswriter.WriteValue(result);
                jswriter.WriteEnd();
            }
            return sb.ToString();
        }
    }
}

 

抱歉!评论已关闭.