JS 上传图片 + 预览功能

Posted 2020-11-08 郑贤

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 上传图片 + 预览功能相关的知识，希望对你有一定的参考价值。

简单粗暴直接进入主题：

<script src="../js/jquery-2.1.1.min.js"></script>
    <style>
        #pic {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 20px auto;
            cursor: pointer;
        }
    </style>
    <script>
        $(function () {
            $("#pic").click(function () {

                $("#upload").click();        //隐藏了input:file样式后，点击头像就可以本地上传
                $("#upload").on("change", function () {
                    console.log(this.files[0]);
                    var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                    console.log(objUrl);
                    if (objUrl) {
                        $("#pic").attr("src", objUrl);   //将图片路径存入src中，显示出图片
                       Upimg();
                    }
                });
            });
        });

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        function Upimg() {
            var data = new FormData(); // 实例化一个表单数据对象
            var files = $(‘#upload‘).get(0).files;

            if (files.length > 0) {
                data.append("ImgFile", files[0]); 
            }

            var ajaxRequest = $.ajax({
                type: "POST",
                url: "ajaxFileUpload.ashx",
                contentType: false,
                processData: false,
                async: true,
                data: data,
                success: function (data) {
                    if (  data == "1") {
                      //  alert("上传图片成功")
                    }
                    else {
                        //alert("上传图片失败")
                    }
                }
            }); 
        }
    </script>
</head>
<body>
     
        <img id="pic" src="../img/QQ图片20180327153818.jpg" />
    <input id="upload" name="file" accept="image/*" type="file" style="display: none" />
</body>

View Code

后台页面：

一般处理程序：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DBUtility;
using System.IO;


namespace MallApi.upImg
{
    /// <summary>
    /// ajaxFileUpload 的摘要说明
    /// </summary>
    public class ajaxFileUpload : IHttpHandler
    {
        // 锁定变量 
        private Object thisLock = new Object();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.ContentType = "text/plain";
            //  HttpFileCollection files = context.Request.Files;
            //   var ImgFiles = HttpContext.Current.Request.Files["ImgFile"];

            var files = HttpContext.Current.Request.Files["ImgFile"];
            string act = context.Request["act"];// HttpContext.Current.Request.Files["act"].ToString();
            String result = string.Empty;
            String[] paths = new String[3];

            try
            { 
                lock (thisLock)
                {
                    
                    string fileName = "logo";
                    string filePath = "../img/" + fileName + "." + "jpg";  //虚拟路径

                    string truepath = "..\\img\\"; //  物理路径

                    if (files != null)
                    {
                        var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath(truepath), fileName + "." + "jpg"); //  物理路径
                        if (System.IO.File.Exists(fileSavePath))
                        {
                            System.GC.Collect();
                            System.IO.File.Delete(fileSavePath);
                        }
                        files.SaveAs(fileSavePath);
                        result = "1";
                    }
                    else
                    {
                        result = "0";
                    }
                }
            }

            catch (Exception ex)
            {

                result = "0";
            }

            context.Response.Write(result);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

View Code

以上是关于JS 上传图片 + 预览功能的主要内容，如果未能解决你的问题，请参考以下文章

js实现图片上传预览功能，使用base64编码来实现

html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~

PHP仿微信多图片预览上传功能

js之上传文件多图片预览

JQ图片文件上传之前预览功能