拖拽 上传文件


$('#qrCode').click(function(e){

$('#myFile').click();

e.stopPropagation();
$('#qrCode').unbind("click"); //移除click
return false;
});
var container = document.getElementById('qrCode');
var enterpriseaccountInfoModel = document.getElementById('enterpriseaccountInfoModel');
//拖动事件的目标对象——document
document.ondragover = function(event){
event.preventDefault(); //让drop事件可被触发
}

document.ondrop = function(event){

event.preventDefault(); //阻止图片在新窗口中打开
}
enterpriseaccountInfoModel.ondragover = function(event){
event.preventDefault(); //让drop事件可被触发
}

enterpriseaccountInfoModel.ondrop = function(event){

event.preventDefault(); //阻止图片在新窗口中打开
}

//拖动事件的目标对象——div#container
container.ondragover = function(event){
$('#qrCode>p').css('display','none');
$('#qrCode>img').css('display','none');
event.preventDefault(); //让drop事件可被触发
}
container.ondragleave = function(event){
$('#qrCode>p').css('display','block');
event.preventDefault(); //让drop事件可被触发
}
container.ondrop = function(event){
$('#qrCode>p').css('display','none');

var filelist = event.dataTransfer.files; //File

if(filelist.length>=2){

alert('你一次只能选择一张图片');
return ;
}

for(var i=0;i<filelist.length;i++){
var file = filelist[i];
fileLoad(file);

}
return ;

}
function fileLoad(file){
//console.log(file);
if(file.type!="image/png"){

alert('您上传的文件包含不合法文件,请重新上传');
$('#qrCode>p').css('display','block');
return ;
}
$('#qrCode>p').css('display','none');
$('#qrCode>img').remove();
var reader = new FileReader();//文件读取器

reader.readAsDataURL( file );
reader.onload = function(){ //读取完成事件

//把DataURL声明为一个img元素的src
var img = document.createElement('img');
img.style.width='100%';
img.src = reader.result;
container.appendChild(img);
$('#reUpload').css('display','inline-block');
// $('#Upload').css('display','block');
}
}
var oBtn = document.getElementById('myFile');
$(oBtn).change(function(e) {//通过鼠标点击文件时,不是通过拖拽
var self=this;
var filelist = self.files; //File

if(filelist.length>=2){
alert('你一次只能选择一张图片');
return ;
}
if(filelist.length==0){

return ;
}
for(var i=0;i<filelist.length;i++){
var file = filelist[i];
fileLoad(file);

}

e.stopPropagation();
$(this).unbind("change"); //移除click
return false;

});
$('#reUpload').click(function(e){//重新上传
$('#myFile').click();

e.stopPropagation();
// $(this).unbind("click"); //移除click
return false;
});



})

优质内容筛选与推荐>>
1、comms.nottingham.ac.uk/learningtechnology
2、python代码安全扫描工具
3、[转]解析UML建模语言中的UML图分类、 UML各种图形及作用
4、GIT入门笔记(15)- 链接到私有GitLab仓库
5、文本框中输入法切换问题


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号