jQuery开发指南 input file 上传图片详解

超、凢脫俗 2021-06-26 16:06 440阅读 0赞

> 摘要：本篇教程介绍了`jQuery`开发指南 `input file` 上传图片详解，希望阅读本篇文章以后大家有所收获，帮助大家对`jQuery`的理解更加深入。

本篇教程介绍了`jQuery`开发指南 `input file` 上传图片详解，希望阅读本篇文章以后大家有所收获，帮助大家对`jQuery`的理解更加深入。

**表单元素`file`设置隐藏，通过其他元素打开：**  
`.imgfile`为`input file`

$(".ul").click(function () 
    { 
     return $(".imgfile").click();
    });

JS部分：

$(".imgfile").change(function () { 
            var file = $(".imgfile").get(0).files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = function () { 
                $("#Image1").attr("src", reader.result);
            }
        });
    
    $("#register2").click(function () { var IMG_BASE = $("#Image1").attr("src"); //要上传的图片的base64编码
            var IMG_ROUTE = $(".imgfile").val();//获取上传图片路径，为获取图片类型使用
            var IMG_ENDFOUR = IMG_ROUTE.substr(IMG_ROUTE.length - 4, 4);//截取路径后四位，判断图片类型
            var IMG_FOMATE = "jpeg"; //图片类型***
            if (IMG_ENDFOUR.trim() == ".jpg")
                IMG_FOMATE = "jpg";
            else if (IMG_ENDFOUR.trim() == ".png")
                IMG_FOMATE = "png";
            else if (IMG_ENDFOUR.trim() == ".bmp")
                IMG_FOMATE = "bmp";
            //图片正式开始上传
            $.ajax({ 
                type: "post",
                url: "server/head.ashx",
                data: {  'imgBase': IMG_BASE, 'imgFormat': IMG_FOMATE },
                dataType: "text",
                success: function (data) { 
                    //data为返回的图片路径
            });
        });

一般处理程序部分：

using System.IO; //需要这三个命名空间
    using System.Drawing;//***
    using System.Drawing.Imaging;//***
    
    
            string imgBase = context.Request["imgBase"];//传递过来的base64编码
            string imgFomate = context.Request["imgFormat"];//传递过来的图片格式
            string end = "1";
            string imgReadyBase = imgBase.Substring(imgBase.IndexOf("4") + 2);//截取base64编码无用开头
            byte[] bytes = System.Convert.FromBase64String(imgReadyBase);//base64转为byte数组
            MemoryStream ms = new MemoryStream(bytes);//创建内存流，将图片编码导入
            Image img = Image.FromStream(ms);//将流中的图片转换为Image图片对象
                                             //利用时间种子解决伪随机数短时间重复问题
            Random ran = new Random((int)DateTime.Now.Ticks);
            //文件保存位置及命名，精确到毫秒并附带一组随机数，防止文件重名，数据库保存路径为此变量
            string s = ran.Next().ToString();
            string serverPath = "../head/" + DateTime.Now.ToString("yyyyMMddhhmmssms") +s+ "." + imgFomate;
            //路径映射为绝对路径
            string path = context.Server.MapPath(serverPath);
            ImageFormat imgfor = ImageFormat.Jpeg;//设置图片格式
            if (imgFomate == "png")  imgfor = ImageFormat.Png;
            try
            { 
                img.Save(path, imgfor);//图片保存
            }
            catch {  end = "0"; }
            end = "head/" + DateTime.Now.ToString("yyyyMMddhhmmssms") +s+ "." + imgFomate;
            context.Response.Write(end);
            context.Response.End();

## `jQuery`动态添加或删除`<input type="file">`元素 ##

在实际应用中，可能根据实际需要添加更多的`<input type="file">`元素。

例如上传更多的产品图片的时候就可能需要此功能，下面通过代码实例介绍一下如何实现此功能。

代码实例如下:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset=" utf-8"> 
    <meta name="author" content="http://www.softwhy.com/" /> 
    <title>蚂蚁部落</title>
    <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
    <script type="text/javascript"> $(function(){ $("input[type=button]").click(function(){ var br = $("<br>"); var input = $("<input type='file'/>"); var button = $("<input type='button' value='删除'/>"); $("#thediv").append(br).append(input).append(button); button.click(function(){ br.remove(); input.remove(); button.remove(); }) }) }) </script> 
    </head>
    <body> 
    <div id="thediv"> 
    <input type="file" id="upload"/> 
    <input type="button" id="btn" value="添加一项"/> 
    </div> 
    </body> 
    </html>

点击添加可以添加更多的上传控件，可以删除添加的空间。

## 一.代码注释: ##

（1）.`$(function(){})`，当文档结构完全加载完毕再去执行函数中的代码。

（2）.`var br = $("<br>")`，创建一个`<br>`对象。

（3）.`var input = $("<input type='file'/>")`，创建一个`<input type='file'/>`对象。

（4）.`var button = $("<input type='button' value='删除'/>")`，创建`<input type='button' value='删除'/>`。

（5）.`$("#thediv").append(br).append(input).append(button)`，在`div`内部的结尾依次添加元素。

（6）.`button.click(function(){})`，为按钮注册`click`事件处理函数。

（7）.`br.remove()，input.remove()，button.remove()`，删除对应的元素。