ajax图片上传

简介: ajax图片上传

直接上代码:


前端【表单与ajax】:


  <div>
        <input type="file" class="form-control" id="filePic"  onchange="uploadImg()"/>
    </div>
    <div>
        <img src="" alt="" id="picShow" width="100" height="100" />
    </div>  
  <script>
//图片上传
    function uploadImg() {
        var formData = new FormData();
        formData.append("filePic", $("#filePic").get(0).files[0]);
        $.ajax({
            url: "/Home/UploadPic",
            type: 'POST',
            data: formData,
            // 告诉jQuery不要去处理发送的数据
            processData: false,
            // 告诉equerry不要去设置Content-Type请求头
            contentType: false,
            beforeSend: function () {//发送之前
                console.log("正在进行,请稍候");
            },
            success: function (data) {
                if (data != "") {
                    $("#picShow").attr("src", data);//图片路径
                } else {
                    console.log("上传失败");
                }
            },
            error: function (responseStr) {
                console.log("error");
            }
        });
    }
    </script>


后台代码(这里是.NET语言测试的):


   public ActionResult UploadPic(HttpPostedFileBase filePic)
        {
            if (filePic != null)
            {
                var path = "/uploads/" + filePic.FileName;
                filePic.SaveAs(Server.MapPath(path));
                return Content(path);
            }
            else
            {
                return Content("");
            }
        }
相关文章
|
Web App开发 JavaScript 前端开发
前端接收数据流实现图片预览效果--ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
本文为转载文章 原文链接:https://www.cnblogs.com/cdemo/p/5225848.html 首先要谢谢这位大神的无私贡献!解决了我的问题也完美表达了我当时的心路历程 ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践 写在前面 :从提出需求到完美的解决问题,实现过程是曲折的。
8130 0
|
XML 前端开发 JavaScript
JS案例:ajax获取图片列表
JS案例:ajax获取图片列表
230 0
JS案例:ajax获取图片列表
|
前端开发
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
111 0
使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?
|
前端开发 安全 JavaScript
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
213 0
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
|
开发框架 移动开发 前端开发
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
ASP.NET MVC中使用jQuery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
297 0
|
JSON 前端开发 JavaScript
ajax实现异步上传图片
ajax方法的使用,多文件的上传,
6678 0
|
前端开发 Shell 数据安全/隐私保护
|
JavaScript 前端开发
使用base64对图片的二进制进行编码,使其可以利用ajax进行显示
有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的。
837 0