关闭

使用JQuery上传图片 实现预览

标签: c#jQueryuploadfile
635人阅读 评论(0) 收藏 举报
分类:
<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();
        }
    }
}


0
0
查看评论

Thinkphp+Jqueryfrom图片异步上传预览

让图片异步上传到项目目录中,让用户或管理员在上传头像或商品图片可以提前预览是否要上传的正确 用第三方插件JQueryfrom来实现这功能 在视图文件中导入JQuery和JQueryfrom文件 html中body为 ...
  • SingleGodAdmin
  • SingleGodAdmin
  • 2016-09-22 16:03
  • 1162

html5以及jQuery实现本地图片上传前的预览

html5与jQuery实现预览本地图片
  • YQXLLWY
  • YQXLLWY
  • 2016-09-08 13:33
  • 8874

jQuery上传图片显示预览

jQuery上传图片显示预览<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type&qu...
  • ityang521
  • ityang521
  • 2016-10-14 13:47
  • 4827

jQuery+Ajax实现图片的预览和上传

jQuery+Ajax实现图片的预览和上传1、配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartResolver" class="org.springframework.web...
  • HYeeee
  • HYeeee
  • 2017-11-21 17:28
  • 1050

H5图片预览及上传(WEB前端)

H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧。 一、html布局文件 html有一个自己的上传文件控件---input,只需要将其type属性设置为file即可上传文件,accept=“im...
  • u014155882
  • u014155882
  • 2017-02-06 11:18
  • 2988

jquery.uploadify插件实现图片上传和预览效果

1、js代码: $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader'  : 'images/uploadify.swf&...
  • cw2004100021124
  • cw2004100021124
  • 2014-11-18 16:37
  • 2526

jquery实现上传图片本地预览效果

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script><input id="upload&quo...
  • tengxing007
  • tengxing007
  • 2017-03-21 22:24
  • 736

jquery实现上传图片的预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
  • u013981877
  • u013981877
  • 2014-03-12 12:55
  • 1070

jquery上传图片本地预览插件V1.2

v1.2  1.修复jquery版本高于1.9,插件报错BUG.  2.提供未压缩代码. 插件支持IE全系列  谷歌 火狐 等浏览器 注意:不支持safari 插件使用说明: 1.必须引用jquery插件,任意版...
  • chaishen10000
  • chaishen10000
  • 2016-05-31 19:56
  • 1405

springmvc-带预览的异步上传图片功能

springmvc配合小插件 上传有缩略图 的图片等文件
  • nich002
  • nich002
  • 2015-07-29 15:51
  • 4988
    个人资料
    • 访问:364968次
    • 积分:5694
    • 等级:
    • 排名:第5452名
    • 原创:99篇
    • 转载:364篇
    • 译文:1篇
    • 评论:10条
    文章分类
    最新评论