JS 图片上传预览

最新推荐文章于 2021-05-15 20:35:14 发布
最新推荐文章于 2021-05-15 20:35:14 发布
阅读量685 收藏
点赞数
分类专栏： C# Javascript 
<pre name="code" class="javascript"><pre name="code" class="html">HTML 部分 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上传</title>
<script src="test.js" language="javascript"></script>
</head>
<body>
     <input type="file" name="doc" id="doc" οnchange="setImagePreview('doc','preview','localImag');"/>
     <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</body>
</html>
JS部分 
function setImagePreview(fileObj, previewObj, localImg) {
    var docObj=document.getElementById(fileObj);
    var imgObjPreview=document.getElementById(previewObj);
    if(docObj.files && docObj.files[0]){
        //火狐下，直接设img属性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '120px';
        imgObjPreview.style.height = '80px';
        //imgObjPreview.src = docObj.files[0].getAsDataURL();
        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }else{
        //IE下，使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById(localImg);
        //必须设置初始大小
        localImagId.style.width = "120px";
        localImagId.style.height = "80px";
        //图片异常的捕捉，防止用户修改后缀来伪造图片
        try{
            localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
        }catch(e){
            alert("您上传的图片格式不正确，请重新选择!");
            return false;
        }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
    }
    return true;
}


 


                

        

        

    




    

      

        

            

              
                
                  coding-monkey
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
js上传图片并预览

				
			

			

				

					a631278993的博客
				

				

					03-04
					
					116
					
				

			

		

		

			
				
一：html代码

<input id="upload_image" type="file" accept="image/*" capture="camera"onchange="upload('#upload_image', '#preview_image');"/>
                               
<img id="pr...

			
		

	



                

              
                



	

		

			

				
					
jquery上传图片预览简单实现

				
			

			

				

					iteye_2050的博客
				

				

					02-28
					
					109
					
				

			

		

		

			
				
简单的图片上传+预览功能
只需导入一个JS和编辑一个函数，函数参数简单易懂

			
		

	



                


  
              

                


	

		

			

				
					
js上传图片并实现预览

				
			

			

				

					wilL-my的博客
				

				

					03-10
					
					287
					
				

			

		

		

			
				
1.HTML


<form id="upload">
            <input type="file" name="img" multiple="true" class="form-control" id="id_images">
            <input type="text" name="id" id="uploadId">
   ...

			
		

	





	

		

			

				
					
用js实现图片上传时的预览功能

				
			

			

				

					qq_45003354的博客
				

				

					09-10
					
					129
					
				

			

		

		

			
				
用js实现图片上传时的预览功能简单的一个功能记录一下,方便以后查找使用
简单的一个功能记录一下,方便以后查找使用
``<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片预览</title>
</head&gt...

			
		

	



		

			
		



	

		

			

				
					
layui框架下图片上传、预览，html+javaScript

				
			

			

				

					Admin_ghost的博客
				

				

					05-15
					
					457
					
				

			

		

		

			
				
1、单图片预览上传




<div class="layui-upload">
 <button type="button" class="layui-btn" id="test1">上传图片</button>
 <div class="layui-upload-list">
  <img class="layui-upload-img" id="demo1">
  <p id="demoText"></p>...

			
		

	





	

		

			

				
					
javascript 图片上传预览-兼容标准

				
			

			

				

					10-29
				

			

		

		

			
				
JavaScript图片上传预览功能在网页应用中非常常见，它允许用户在正式上传图片之前先预览效果，确保图片质量和尺寸符合预期。以下是对标题和描述中所述知识点的详细说明：  ### 1. 图片预览的基本原理  在HTML中，`...

			
		

	





	

		

			

				
					
js图片上传预览效果

				
			

			

				

					03-17
				

			

		

		

			
				
实现JavaScript图片上传预览效果主要涉及以下步骤：  1. **文件选择**：在HTML中添加`<input type="file">`元素，让用户选择图片。通过设置`accept`属性限制只能选择图片文件。  2. **事件监听**：使用JavaScript...

			
		

	





	

		

			

				
					
纯 js 实现得 图片上传预览插件

				
			

			

				

					08-29
				

			

		

		

			
				
【纯 js 实现得 图片上传预览插件】  在前端开发中，图片上传和预览功能是非常常见且重要的一个部分。本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且...

			
		

	





	

		

			

				
					
js图片上传预览

				
			

			

				

					11-03
				

			

		

		

			
				
通过以上步骤，我们可以实现一个基本的JavaScript图片上传预览功能。对于更复杂的需求，例如多图预览、拖放上传、进度显示等，可以进一步扩展代码逻辑。记得在实际项目中，要考虑到不同浏览器的兼容性和性能优化。

			
		

	





	

		

			

				
					
js实现上传图片及时预览

				
			

			

				

					10-22
				

			

		

		

			
				
主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下

			
		

	





	

		

			

				
					
js实现文件上传预览功能

				
			

			

				

					青龙
				

				

					06-15
					
					615
					
				

			

		

		

			
				
[code="java"]
   
  选择图片:  
    
  预　　览:  
   
      
      
     
[/code]

[code="java"]

	 //检查图片的格式是否正确,同时实现预览  
    function setImagePreview(obj, localImagId, imgObjPreview) {  
   ...

			
		

	





	

		

			

				
					
上传图片预览JS脚本 Input file图片预览的实现示例

				
			

			

				

					E01014165的专栏
				

				

					06-06
					
					478
					
				

			

		

		

			
				
By：DragonDean

//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");

var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{


			
		

	





	

		

			

				
					
layui上传图片列表展示_layui如何实现图片的上传以及图片预览（纯代码）

				
			

			

				

					weixin_39631932的博客
				

				

					12-22
					
					1335
					
				

			

		

		

			
				
本篇文章给大家带来的内容是关于layui如何实现图片的上传以及图片预览(纯代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。1.选择文件后自动上传常规使用：普通图片上传上传图片            layui.use(['upload','jquery'], function(){var $ = layui.$,upload = layui.upload;//普通图片上传va...

			
		

	





	

		

			

				
					
layui图片上传相关问题解决办法

				
			

			

				

					雷绍发
				

				

					04-12
					
					3805
					
				

			

		

		

			
				
表单多图片文件上传解决办法

参考layui实例 高级应用：制作一个多文件列表

再把上传按钮隐藏，在图片控件里面写

choose：function(obj){obj.preview(function(index,file,result){

记录文件数组，字段设置城false，赋值一段html到页面上，设置重传按钮js的和删除的js

});},done:function(res,index,...

			
		

	





	

		

			

				
					
利用js预览上传前的图片

				
			

			

				

					走向构架师
				

				

					12-23
					
					289
					
				

			

		

		

			
				
function setImagePreview(){  //添加div点击选择图片后触发事件后再预览图片出看到图片
        var docObj=document.getElementById("pro_image");   
        var imgObjPreview=document.getElementById("preview");  
        if(doc

			
		

	





	

		

			

				
					
js图片上传预览功能兼容实现

					
热门推荐

				
			

			

				

					技术成就梦想，知识改变命运 !
				

				

					01-02
					
					1万+
					
				

			

		

		

			
				
js图片上传预览

function PreviewImage(imgFile)
{
    var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
    filextension=filextension.toLowerCase();
    if ((file

			
		

	





	

		

			

				
					
javaweb实现上传图片且预览

					
最新发布

				
			

			

				

					06-02
				

			

		

		

			
				
实现上传图片并预览，需要以下步骤：

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、付费专栏及课程。

              

            

          

      

      余额充值