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

最新推荐文章于 2024-07-12 15:49:20 发布

.NET跨平台

最新推荐文章于 2024-07-12 15:49:20 发布

阅读量1.6k

点赞数

分类专栏： Jquery及其组件

原文链接：https://blog.csdn.net/WuLex

版权

Jquery及其组件专栏收录该内容

147 篇文章 3 订阅

订阅专栏

摘要：本篇教程介绍了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()，删除对应的元素。

.NET跨平台

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery开发指南 input file 上传图片详解

摘要：本篇教程介绍了jQuery开发指南 input file 上传图片详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。本篇教程介绍了jQuery开发指南 input file 上传图片详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。表单元素file设置隐藏，通过其他元素打开：.imgfile为input file$(".ul...
复制链接

扫一扫