项目--ajax上传文件(本次是图片)(.net)

1.下载一个ajaxfileupload.js

2.给上传按钮添加事件

<input type="button" id="btnUpload" value="上传" onclick="ajaxFileUpload()"/>

注:谷歌浏览器dataType中的JSON必须大写

<script type="text/javascript">
          function ajaxFileUpload(){
               $.ajaxFileUpload({
                    url:‘ajax/UploadImage.ashx‘,            //需要链接到服务器地址
                    secureuri: false,
                    fileElementId:‘houseMaps‘,                        //文件选择框的id属性
                    dataType: ‘JSON‘,                                     //服务器返回的格式,可以是json
                    success: function (data, status)            //相当于java中try语句块的用法
                    {
                        //alert(data);
                        if(data.length > 0){
                            $("#Photo").val(data);
                            $("#btnUpload").val("已上传");
                            alert("成功!");
                        }
                        else{
                            $("#Photo").val("");
                             $("#btnUpload").val("上传");
                            alert("失败!");
                        }
                    },
                    error: function (data, status, e)            //相当于java中catch语句块的用法
                    {
                        alert("失败");
                        //$(‘#result‘).html(‘添加失败‘);
                    }
                });
          }
      </script>

3.后台上传文件处理,并返回文件名称("text/html" 而非text/json,因为json返回额外多的东西)此处只做简单处理,直接返回拿到字符串即可

context.Response.ContentType = "text/html";

        HttpFileCollection files = context.Request.Files;
        string msg = string.Empty;
        string error = string.Empty;
        string imgurl;
        try
        {
            if (files.Count > 0)
            {
                //files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));

                string filePath = AppDomain.CurrentDomain.BaseDirectory + @"Admin\ApplyImage\";
                string filename = files[0].FileName;
                //检测文件名称
                if (filename.ToLower().Contains(".jpg") || filename.ToLower().Contains(".gif") ||
                filename.ToLower().Contains(".bmp"))
                {
                    //改文件名
                    int index = filename.LastIndexOf(".");
                    string lastName = filename.Substring(index, filename.Length - index);
                    //新文件名称,以时间年月日时分秒作为文件名
                    string newfile = DateTime.Now.ToString("yyyyMMddhhmmss") + lastName;
                    files[0].SaveAs(filePath + newfile);

                    //msg = " 成功! 文件大小为:" + files[0].ContentLength;
                    //imgurl = "/" + files[0].FileName;
                    //string res = "{ error:‘" + error + "‘, msg:‘" + msg + "‘,imgurl:‘" + imgurl + "‘}";
                    //string res = "{error:‘‘,msg:‘成功‘}";
                    context.Response.Write(newfile);
                    context.Response.End();
                }
                else
                {
                    context.Response.Write("");
                    context.Response.End();
                }
            }
        }
        catch
        {
            context.Response.Write("");
            context.Response.End();
        }
时间: 2024-08-28 01:28:46

项目--ajax上传文件(本次是图片)(.net)的相关文章

闲话ajax,例ajax轮询,ajax上传文件

引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放假,赶紧补上吧! ajax的出现,可以出给用户带来了很好的体验,证据如下: 1.感觉:以前要给用户呈现新的内容,就必须要刷新当前页面,结果往往是这样:用户看着看着,唰...,然后又重头看起,我那个去,这谁受得了; 自从有了ajax后,就是这样的,用户关注哪一块,变化哪一块,我们就更新那一块,完全看不

使用html5特性--ajax上传文件

在html5以前,ajax上传文件算是一个比较麻烦的事,要是想显示一下上传进度就更不容易.遇到这种情况往往需要借助于第三方插件,比如jquery.fileupload.js.如今html5已经技术已经变成一个非常流行.非常新潮的技术了,各个浏览器厂商也实现了不少的html5规范,如今文件上传有了html5的支持已经变的相当容易了,我自己尝试了一下用javascript原生的api来实现ajax上传文件,为了页面不至于太丑,我使用了bootstrap的一些组件,先上效果图: 实现的功能介绍: aj

ajax上传文件的原理与实现

    ajax已经很普遍了,但使用 ajax上传文件自己却一直都没有涉及,我只知道挺复杂的,上传文件不同于上传一般的表单数据,必须特殊处理,知道一般ajax使用上传都是应用一个虚拟的iframe,但由于项目需要,在网上找了找,没想到找到了两个支持ajax上传文件的jquery插件,jquery.uploadify.js和dropzone.min.js两个都可以实现ajax上传文件,效果也不错. 1使用jquery.uploadify.js上传文件  这种上传方式,使用了Flash,因此需要引用

jS Ajax 上传文件报错&quot;Uncaught TypeError: Illegal invocation&quot;

jS Ajax 上传文件报错"Uncaught TypeError: Illegal invocation" query-3.1.1.min.js:4 Uncaught TypeError: Illegal invocation 错误原因: jQuery Ajax 上传文件处理方式, 使用ajax向后台发送数据时其中的图片数据的参数类型为file,属于对象,而不是一个字符串值.导致错误的出现 var formData = new FormData(); formData.append(

使用ajax上传文件

有时候我们需要在web端向服务器上传文件,以前是使用form的方式进行提交,html5中支持直接使用xmlhttprequest上传文件,send对象支持blob对象而文件就是一个blob对象 ajax上传文件 ajax中可以通过参数processData这个参数来控制data是否进行转换,我们将这个参数设置为false就可以使用ajax进行文件的上传操作了 example: $.ajax({ url: "your url", type: "POST", proce

ajax上传文件

以往我用的上传文件都是Flex写的,最近html页面需要上传页面功能. 相比之下,比flex还是要麻烦一些,问题也多一些.这里记录下: ajax上传文件,我用到了ajaxfileupload.js修正版. <form id="addAttaForm" enctype="multipart/form-data"> <div class="row"> <label for="fileUpload"&g

【原创】AJAX上传文件,formdata表单提交问题

今天遇到一个特别神奇的问题,AJAX上传文件,formdata表单提交问题,后台显示无法获取上传文件. 排查许久发现是formdata.append();时,要先添加file,而后添加其他参数.方可正常工作. 可是却不知到底是和原因.去了火狐开发者社区也未能找到答案. 还望知道的大神赐教一二.

atitit.ajax上传文件的实现原理 与设计

atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直接实现上传文件 1 2.1. 传统的实现方式iframe 2 2.2. html5转码base64 3 2.3. 其它插件FLASH的实现原理 3 3. 上传进度的实现原理 3 3.1. 使用ajax结合服务端的进度返回,比較麻烦 4 4. 本地预览的解决 4 4.1. 用HTML5上传文件 4 5

springMVC+jsp+ajax上传文件

工作中遇到的小问题,做个笔记 实现springMVC + jsp + ajax 上传文件 HTML <body> <form id="myform" method="post" > 登录名<input type="text" name="loginName" /> <br> 上传录音<input type="file" name="record