node服务端上传:http://www.jianshu.com/p/1e92a86c571a
拖拽,预览,上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#drop {
border: 1px solid gray;
height: 100px;
}
img {
height: 100px;
}
</style>
</head>
<body>
<div id='drop'>
<input type="file" name="file" id="upload-file">
</div>
<div id="destination"></div>
<script>
var drop = document.getElementById('drop');
var upload_file = document.getElementById('upload-file');
var destination = document.getElementById('destination');
// 进入元素触发
drop.addEventListener("dragenter", function (e) {
e.preventDefault();
console.log('进入', e);
})
// 离开元素触发
drop.addEventListener("dragleave", function (e) {
e.preventDefault();
console.log('离开', e);
})
// 元素上移动触发
drop.addEventListener("dragover", function (e) {
e.preventDefault();
})
// 放置图片在元素上触发
drop.addEventListener("drop", function (event) {
var e = event || window.event;
e.preventDefault();//阻止默认事件,这是必须的,
var files = e.dataTransfer.files;
console.log(files);
fileFn(files);
})
// input选择图片触发
upload_file.addEventListener('change', function () {
console.log(this.files);
fileFn(this.files);
});
var isempty = false;//是否清空已选择文件
var fileArr = [];//存储选中的文件数据
function fileFn(f) {
if (isempty) {
fileArr = [];
}
for (var i = 0; i < f.length; i++) {
fileArr.push(f[i]);
}
destination.innerHTML = '';
for (var x = 0, xlen = fileArr.length; x < xlen; x++) {
file = fileArr[x];
if (file.type.indexOf('image') != -1) {
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
destination.appendChild(img);
};
reader.readAsDataURL(file);//读取文件
}
}
upload();
}
function upload() {
xhr = new XMLHttpRequest();
xhr.open("post", "http://b.adtk.cn/file.php", true);
// xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onload=function(data){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
}
};
var fd = new FormData();
fd.append('file', fileArr[0]);
xhr.send(fd);
}
</script>
</body>
</html>
php文件上传
<?php
header('Access-Control-Allow-Origin:*');
/*
{
"name":"1.png",//原名称。
"type":"image\/png",//文件的 MIME 类型
"tmp_name":"C:\\Users\\h\\AppData\\Local\\Temp\\phpEAC5.tmp",//临时文件名
"error":0,//错误代码,0成功,1大小超过php.ini限制,2-超过HTML 表单中 MAX_FILE_SIZE 选项指定的值,3; 文件只有部分被上传。 4; 没有文件被上传。5; 上传文件大小为0.
"size":160330//已上传文件的大小
}
*/
// 檢查文件是否已存在
if (file_exists("upload/" . $_FILES["file"]["name"])){
echo $_FILES["file"]["name"] . "已存在";
}else{
// 將零時文件保存
move_uploaded_file($_FILES["file"]["tmp_name"],"upload/" . $_FILES["file"]["name"]);
echo json_encode($_FILES['file']);
}
?>
预览兼容性方案(网上搜的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js图片上传预览</title>
<script>
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
//path = imgFile.files[0].getAsDataURL();// FF 3.0
document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
//document.getElementById("img1").src = path;
}
}
}
</script>
</head>
<body>
<input type="file" onchange='PreviewImage(this)' />
<br />
<div id="imgPreview" style='width:120px; height:100px;'>
<img id="img1" src="" width="120" height="100" />
</div>
</body>
</html>
