js实现图片上传前预览

利用js实现了图片上传前的预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Preview</title>
    <style>
        .image-preview{
            width:300px;
            min-height: 100px;
            border:2px solid #dddddd;
            margin-top: 15px;

            display:flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color:#cccccc;
        }
        .image-preview__image{
            display:none;
            width:100%;
        }
    </style>
</head>
<body>
    <h1>文件上传图片预览</h1>
    <input type="file" name="inpFile" id="inpFile">
    <div id="imagePreview" class="image-preview">
        <img src="" alt="image preview" class="image-preview__image">
        <span class="image-preview__default-text">图片预览</span>
    </div>
    <script>
        const inpFile=document.getElementById("inpFile");
        const previewContainer=document.getElementById("imagePreview");
        const previewImage=previewContainer.querySelector('.image-preview__image');
        const previewDefaultText=previewContainer.querySelector('.image-preview__default-text');

        inpFile.addEventListener("change",function(){
            const file=this.files[0];
            if(file){
                const reader=new FileReader();
                previewDefaultText.style.display='none';
                previewImage.style.display='block';

                reader.addEventListener('load',function(){
                    console.log(this);
                    previewImage.setAttribute('src',this.result);
                });

                reader.readAsDataURL(file);
            }else{
                previewDefaultText.style.display=null;
                previewImage.style.display=null;
                previewImage.setAttribute('src',"");
            }
        });
    </script>
</body>
</html>

效果:
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现图片,需要以下步骤: 1. 在端页面添加一个input标签,type属性设置为file,用于选择本地图片。 ``` <input type="file" id="fileInput" onchange="previewImage()"/> ``` 2. 在端页面添加一个用于图片的标签,例如img标签。 ``` <img id="preview" src="" alt="图片" style="max-width:200px;max-height:200px;"> ``` 3. 在JavaScript中实现图片的功能。 ``` function previewImage() { // 获取选择的文件对象 var file = document.getElementById("fileInput").files[0]; // 创建FileReader对象 var reader = new FileReader(); // 读取文件内容 reader.readAsDataURL(file); // 当文件读取完成时触发onload事件 reader.onload = function(e) { // 获取图片的标签对象 var preview = document.getElementById("preview"); // 设置图片的地址 preview.src = e.target.result; } } ``` 4. 在后端处理上图片实现图片的后端代码可以使用Java提供的Servlet或Spring MVC框架等进行实现。 以下是一个简单的Servlet上图片的示例代码: ``` protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 获取上的文件对象 Part part = request.getPart("file"); // 获取文件名 String fileName = part.getSubmittedFileName(); // 获取文件保存的路径 String savePath = request.getServletContext().getRealPath("/upload"); // 创建保存文件的目录 File saveDir = new File(savePath); if (!saveDir.exists()) { saveDir.mkdirs(); } // 生成保存文件的唯一名称 String uuid = UUID.randomUUID().toString(); String saveName = uuid + "_" + fileName; // 保存文件 part.write(savePath + File.separator + saveName); // 返回保存的文件路径 String filePath = request.getContextPath() + "/upload/" + saveName; response.getWriter().write(filePath); } ``` 在端页面中,可以使用Ajax将选择的图片文件上到后端进行处理,并将返回的文件路径设置到图片的标签中。 ``` function uploadImage() { var file = document.getElementById("fileInput").files[0]; // 创建FormData对象,用于封装需要上的数据 var formData = new FormData(); formData.append("file", file); // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求方式和请求地址 xhr.open("POST", "/uploadServlet"); // 发送请求 xhr.send(formData); // 当请求状态改变时触发onreadystatechange事件 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 获取图片的标签对象 var preview = document.getElementById("preview"); // 设置图片的地址 preview.src = xhr.responseText; } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值