<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>上传图片</title>
<link href="css/iconfont.css" rel="stylesheet" />
<link href="css/imagesUpload.css" rel="stylesheet" />
</head>
<body>
<div class="imagesUploadContent" id="imagesUploadContent">
<!--
<div class="uploadBtns">
<ul>
<li><div class="selectFileBtn">选择文件</div></li>
<li><div class="uploadFileBtn"><i class="iconfont icon-shangchuan"></i></div></li>
<li><div class="deleteFileBtn"><i class="iconfont icon-shanchu"></i></div></li>
</ul>
</div>
<div class="box">
<div class="fileItem" fileCodeId="0">
<div class="imgShow">
<img src="christmas_4x.png" width="150" height="150" />
</div>
<div class="status"><i class="iconfont icon-close"></i></div>
//<div class="status"><i class="iconfont icon-right"></i></div>
<div class="fileName">图片名</div>
</div>
</div>
<input type="file" id="fileSelectInput" class="fileSelectInput" />
-->
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/imagesUpload.js"></script>
<script type="text/javascript">
$(".imagesUploadContent").initUpload({
fileType:["jpg","png"], //文件类型 , 默认所有文件
fileMaxNum:3, //文件最大数量 ， 默认没有限制
fileMaxSize:1000 //单个文件最大大小 ， 默认没有限制
});
/*
var initOption={
"uploadId":uploadId,
"uploadUrl":"#", //上传地址
"fileType":"*", //文件类型
"fileMaxNum":-1, //文件最大数量：-1为没有限制 ,必须为整数
"fileMaxSize":-1, //单个文件最大大小：-1为没有限制， 单位kb
"canDrag":true, //文件是否可拖拽
"isHiddenUploadBtn":false, //是否隐藏上传按钮 ， 默认为不隐藏
"isHiddenCleanBtn":false, //是否隐藏清除按钮 ， 默认为不隐藏
"ismultiple":true, //是否可以选择多文件
"isAutoClean":true, //是否上传后自动完成清除
"fileSavePath":"", //文件上传后后台设置的根目录
"uploadSuccess":function(){}, //上传成功后的回调函数
"uploadFalse":function(){}, //上传失败后的回调函数
}
*/
</script>
</body>
</html>
拖动图片并上传的完整代码和详细流程图
5星 · 超过95%的资源 需积分: 16 196 浏览量
2019-01-08
20:25:48
上传
评论
收藏 143KB ZIP 举报 
拖动图片并上传的完整代码和详细流程图.zip （6个子文件） 
上传图片操作 css 
imagesUpload.css 1KB iconfont.css 3KB
index.html 3KB js jquery-3.3.1.min.js 85KB imagesUpload.js 14KB 拖拽图片上传流程图.vsdx 109KB
评论1
最新资源