webkit内核下（chrome 360急速模式搜狗高速模式）ctrl+v粘贴图片_搜狗浏览器 csdn 复制图片设置-优快云博客

本文链接：https://blog.youkuaiyun.com/javascript_2011/article/details/23931645

本文介绍了如何使用jQuery编写一个脚本来从浏览器剪贴板中读取图片，并通过POST请求将其上传到服务器，实现图片的快速上传功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
	(function($) {
		$.fn.pasteImg = function(options) {
			var defaults = {
				url : 'upload',
				path : '/upload',
				success : function(data) {
					$(this).append("<div><img src='./upload/" + data + "'</img>" + '</div>');
				}


			};
			var opts = $.extend(defaults, options);
			$(this).on('paste', function(b) {
				var e = b.originalEvent;
				var items = e.clipboardData.items;
				for ( var i = 0; i < items.length; ++i) {
					var item = e.clipboardData.items[i];
					if (items[i].kind == 'file' && items[i].type == 'image/png') {
						//FileReader可以参考API
						var fileReader = new FileReader();
						//readAsDataURL是一个异步过程，这里提供回调方法
						fileReader.onloadend = function() {
							var d = this.result.substr(this.result.indexOf(',') + 1);
							$.ajax({
								type : 'POST',
								url : opts.url,
								dataType: "json", 
								data : {
									content : encodeURIComponent(d),
									path : opts.path
								},
								success : opts.success
							});


						};
						fileReader.readAsDataURL(item.getAsFile());
						break;
						// Just get one
					}
				}
			});


		};
	})(jQuery);
	
	$('#test').pasteImg({
		//后台接收请求地址
		url : '/management/tb_item/imgUpload',
		//生成图片存放路径
		path : '/styles/upload',
		success : function(res) {
			alert(res);
			if(res.statusCode == 200){
				$('.img').html("<img src='"+res.message+"' />");
			}
		}
	});
</script>