js实现单图片上传

最新推荐文章于 2023-03-17 19:33:04 发布

砖1⃣️的渣男

最新推荐文章于 2023-03-17 19:33:04 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/Linchack/article/details/85052655

版权

本文详细介绍了如何使用JavaScript实现单张图片的上传功能，包括文件选择、预览、上传到服务器等步骤。通过HTML5的File API，我们可以获取到图片文件并进行预览，然后利用Ajax异步提交到后台服务器，实现无刷新的上传体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<div>
			<input type="file" id="file" style="display:none;" >
            <img src="" width="200px" height="200px" id="img-change"><br /><br />
            <button id="btn">上传图片</button>
		</div>
	</body>
	
	<script type="text/javascript">
		$(function(){
			$('#img-change').click(function(){
				$('#file').click();
			})
			
			var filepath;
			$("#file").change(function() {
				 var files = $('#file')[0].files;
                 if (files && files.length > 0) {  
                	 var sizes = files[0].size; 
                     if(files[0].size > 1024 * 1024 * 1) {
                         alert('图片大小不能超过 1MB!');
                         return;
                     }
                     filepath = files[0];
                     console.log(filepath);
                 }
                //一、本地回显图片
                // 获取 window 的 URL 工具
		        var URL = window.URL || window.webkitURL;
		        // 通过 file 生成目标 url
		        var imgURL = URL.createObjectURL(filepath);
		        console.log(imgURL);
		        //用attr将img的src属性改成获得的url
		        $("#img-change").attr("src",imgURL);
		        // 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了
		        // URL.revokeObjectURL(imgURL);
			})
			
			$("#btn").click(function () {
				var data = new FormData();
				$.each(
					$('#file')[0].files,
					function(i,file) {
						data.append('upload_file',file);
						data.append('behavior','uploadimage');
						data.append('websiteid','demo');
						data.append('tokenid','1');
				});
		        $.ajax({
		            url: 'http://xxx/',
 					type : 'POST',
 					data : data,
 					cache : false,
 					contentType : false,  
 					processData : false,  
 					success : function(rdata) {
 						if (rdata.status == 200) {	
 							var datas = rdata.data[0];
 							//上传成功后返回路径
 							//$('#img-change').attr('src', datas.url);
 							alert(datas.url);
 						}else{
 							alert(rdata.msg);
 						}
 					},
 					error : function(data,status,e){
                        alert(e);
                    }
		       });
            });
		})
      
	</script>
</html>

砖1⃣️的渣男

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现单图片上传

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
复制链接

扫一扫