首页  编辑  

HTML5编辑框粘贴图片直接上传

Tags: /计算机文档/网页制作/   Date Created:
HTML网页中,粘贴图片后,直接上传服务器:

jquery写法:
<input id="text" type="text">
<script>
$('#text')[0].addEventListener('paste', function(e) {
	var cb = e.clipboardData.items;
	for(var i=0; i < cb.length; i++) {
		if (cb[i].kind != 'file' && cb[i].type.indexOf('image') < 0) return;
		
		var file = cb[i].getAsFile();				
		var formData = new FormData();
		formData.append('file', file);
		$.ajax({
			url : 'upload',     // <----- 上传服务器地址
			type : 'POST',
			data : formData,
			contentType: false,
			processData: false,
			dataType: 'json',
			clearForm: true,
			success: function(data) {
				if (data.result === "OK") {     // <----- 根据服务器返回的内容自己处理即可,例如服务器可以返回生成的图片的url地址,前端根据需要生成img节点就可以了
					Toast('上传成功: ' + data.url, 5000);
				} else {
					Toast('上传失败:<br/>' + data.msg, 5000);
				}
			},
			error: function(data, status, e) {
				Toast('上传失败:<br/>' + e, 5000);
			}
		});
		
		e.preventDefault();
	}
});
</script>