上传图片demo

//上传本地图片
function uploadLocalImg(src){
	var formData = new FormData($("#upload_img")[0]); 
	var data = src;
	data = data.split(',')[1];
	data = window.atob(data);
	var ia = new Uint8Array(data.length);
	for (var i = 0; i < data.length; i++) {
		ia[i] = data.charCodeAt(i);
	}
	var blob = new Blob([ia],{type:imgType,endings:'transparent'});
	formData.append("image", blob, imgName);
	$.ajax({  
	      url: 'api/image/upload',  
		  dataType: "json",
	      type: 'POST',  
		  cache: false,
		  beforeSend: function(xhr){
	    		if(token && token != ''){
	        		xhr.setRequestHeader('token', token);
	    		}
	      },
	      data: formData,
		  processData: false,
		  contentType: false,
	      success: function (data) {
	    	  if(data.isSuccessful){
	    		    var src = data.data.url;
	    	    	var insertImg = '<img src="'+ src +'"style="max-width:100%;display:inline;">';
	    			UE.getEditor('editor').execCommand('insertHtml', insertImg);
	    			Common.floatingMessage("添加图片成功~");
	    			$(".imgs").hide();
	    			$(".dialog_mask").hide();
		         
	    	  }else{
	    		  alert(data.message);
	    	  }
	      },  
	      error: function (data) {  
	          console.log(data);  
	      }  
	 }); 
}





Drop zone是一种在网页中嵌入的功能,用于上传图片或其他文件。用户只需将文件拖放到指定区域(即Drop zone)中,即可实现文件的上传。Drop zone上传图片demo则是一个示例项目,用来展示如何在网页上实现这一功能。 该demo的实现可以分为前端和后端两个部分。前端部分主要负责展示网页并实现文件拖放区域,后端部分则用于接收和处理上传的文件。 在前端部分,我们可以使用HTML和CSS来创建一个网页,并在网页中嵌入一个div元素作为Drop zone。通过CSS样式,我们可以设置这个div的大小、边框等属性,以使其在页面中看起来像一个区域,用来接收文件的拖放。 为了实现文件的拖放,我们可以使用JavaScript代码来监听div元素的拖放事件,并在事件发生时获取被拖放的文件。通过JavaScript的File API,我们可以读取这个文件的内容,并将其传递给后端部分进行处理。 在后端部分,可以使用服务器端的编程语言(比如PHP、Python等)来接收上传的文件。通过后端编码逻辑,可以实现对上传文件的存储、命名、验证等操作。同时,根据需求,可以添加对文件类型、大小等的限制,以确保上传的文件满足要求。 综上所述,Drop zone上传图片demo提供了一个简单的示例,展示了如何利用前端技术(HTML、CSS、JavaScript)和后端技术(PHP、Python等)实现图片的拖放上传功能。这个示例项目可供开发者参考和学习,从而在自己的网站或应用中实现类似的功能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值