HTML:
  
                <div id="box">
<div id="drop_area">将文件拖拽到此区域</div>
<div id="area_img"> <img src="../images/tzsc.png" id="img_upfiles" style="cursor: pointer"/> </div>
</div>
    <div class="layui-form-item">
<div class="layui-input-block">
<div class="layui-upload" style="margin-left: 730px">
<button type="button" class="layui-btn layui-btn-normal" id="upfiles">&emsp;<i class="layui-icon"></i> 文件上传&emsp;</button>
<span style="color: #666"></span>
</div>
<table id="tabl1" class="layui-table" style="width: 850px;margin-top: -38px;margin-left: -110px;">
<colgroup>
<col width="300"><col width="80"><col width="160"><col width="300">
</colgroup>
<thead>
<tr>
<th>文件名称</th><th>类型</th><th>操作</th><th>备注</th>
</tr>
</thead>
<tbody id="fileList"></tbody>
</table>
</div>
</div>

JS:

XMLhttpReuest.js
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
{?*拖拽上传*?}
<script>
window.onload = function () {
var box = document.getElementById('box');
box.ondragenter = function (e) {
e.preventDefault();
}
box.ondragover = function (e) {
e.preventDefault();
}
box.ondragleave = function (e) {
e.preventDefault();
}
box.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
var formData = new FormData();
formData.append('file', file); var xml = ajaxFunction();
xml.open("post", './ajax.files.upload.php?MID={?$lev.MID?}&upfilecode={?$upfilecode?}&path=djyp_file', true);
xml.send(formData);
xml.onreadystatechange = function () {
console.log(xml.readyState);
console.log(xml.status);
if(xml.readyState == 4 && xml.status==200){
var res=JSON.parse(xml.responseText);
if(res.code > 0){
layer.msg(res.msg);
}else {
var tr = $(['<tr>'
, ' <td><input type="text" autocomplete="off" placeholder="请输入文件名称" value="' + res.old_name + '" name="old_name[' + res.id + ']"></td>'
, '<td>' + res.file_ext + '</td>'
, '<td>'
, '<a class="layui-btn layui-btn-warm layui-btn-xs fileread" href="' + res.path + res.new_name +'.'+ res.file_ext + '" target="_blank"> <i class="layui-icon layui-icon-read"></i>查看 </a>'
, '<button type="button" class="layui-btn layui-btn-xs filedel" style="background: #ff5722;"> <i class="layui-icon layui-icon-delete"></i>删除 </button>'
, '</td>'
, ' <td><input type="text" autocomplete="off" placeholder="请输入备注" name="old_name1[' + res.id + ']"></td>'
, '</tr>'].join(''));
//删除
tr.find('.filedel').on('click', function () {
$.post('ajax.attach.file.del.php?MID={?$lev.MID?}',{id:res.id},function(data){
if (data.code > 0)
parent.layer.msg(data.msg, {offset: '0px', icon: 2, time: 1000});
else
tr.remove();
}); });
$("#fileList").append(tr); var title = $("#title");
if(title.val() == '')
title.val(res.old_name);
}
}
}
}
}
</script>

php:

ajax.files.upload.php
header("Content-Type:text/html;charset=UTF-8");$CODE = $_GET['upfilecode'];
$PATH = $_GET['path']; $a = new UPFILE($CODE, $PATH, $_FILES['file'], $pl); class UPFILE
{
public $pl = '';
public $file = ''; public function __construct($code, $path, $file, $pl)
{
if ($code == '')
$this->ExtFrm(1, "缺少上传编码");
if ($path == '')
$this->ExtFrm(2, "缺少上传路径");
if (!$file)
$this->ExtFrm(3, "找不到上传文件");
if ($file['size'] > 1024 * 1024 * 50) {
$this->ExtFrm(3, "上传失败,文件大小超过限制(文件大小:50MB)");
}
$size=round($file['size']/1024/1024, 2);
$this->pl = $pl;
$this->file = $file;
$this->type = $path; $filePath = $this->createFile($path);
$fileOld = $this->verifyFile();
$this->fileupload($code, $filePath, $fileOld,$size);
} /**
* Method:createFile
* Desc:创建文件路径
*/
public function createFile($path)
{
$Ym = date('Ym');
$filepath = $Ym . ($path != "" ? "/" : "") . $path;
$fullpath = '../upfiles/' . $filepath;
if (!is_dir($fullpath)) {
$res = mkdir($fullpath, 0777, true);
}
return array($filepath . "/", $fullpath . "/");
} /**
* Method:verifyFile
* Desc:验证文件格式
*/
public function verifyFile()
{
$pinfo = pathinfo($this->file["name"]);
$extension = strtolower($pinfo['extension']);
switch ($this->type) {
case 'message_img': //消息推送 - 富文本 图片上传
$file_format = array("jpg", "jpeg", "gif", "png");
if (!in_array($extension, $file_format)) {
$this->ExtFrm(4, "上传失败,文件格式不正确(支持:jpg,gif,png)");
}
break;
default:
$file_format = array("jpg", "jpeg", "gif", "png", "rar", "zip", "doc", "docx", "xls", "xlsx", "pdf", "txt", "ppt", "pptx", "tif",'mp4');
if (!in_array($extension, $file_format)) {
$this->ExtFrm(4, "上传失败,文件格式不正确(支持:jpg,gif,png,rar,zip,doc,docx,xls,xlsx,pdf,txt,ppt,pptx,tif,mp4)");
}
break;
}
return array("filename" => $pinfo['filename'], "extension" => $extension);
} /**
* Method:fileupload
* Desc:上传文件
*/
public function fileupload($code, $filepath, $fileold,$size)
{
$old_name = $fileold['filename'];
$new_name = time() . rand(0, 500000) . dechex(rand(0, 10000));
move_uploaded_file($this->file['tmp_name'], $filepath[1] . $new_name . "." . $fileold['extension']); if ($this->type != 'message_img') {
$sql = "insert into system_attach (`BM`,`YFJMC`,`XFJMC`,`WJLJ`,`WJLX`,`CJSJ`,`CJRID`,`CJRMC`,`SIZE`) values (:BM,:YFJMC,:XFJMC,:WJLJ,:WJLX,:CJSJ,:CJRID,:CJRMC,:SIZE)";
$this->pl->query($qry, $sql, array(
":BM" => $code,
":YFJMC" => $old_name . ".",
":XFJMC" => $new_name . "." . $fileold['extension'],
":WJLJ" => $filepath[0],
":WJLX" => $fileold['extension'],
":CJSJ" => date("Y-m-d H:i:s"),
":CJRID" => $_SESSION['UID'],
":CJRMC" => $_SESSION['NAME'],
":SIZE" => $size,
));
$id = $this->pl->insert_id();
}
$this->ExtFrm(0, "上传成功", $id, $filepath[1], $new_name, $old_name, $fileold['extension']);
} /**
* Method:extFrm
* Desc:结果返回
*/
public function extFrm($code, $msg, $id = 0, $filepath = "", $new_name = '', $old_name = '', $file_ext = "")
{
if ($code > 0) {
$ExtFrm = array("code" => $code, "msg" => $msg);
} else if ($this->type == 'message_img') {
$title = $new_name . "." . $file_ext;
$ExtFrm = array("code" => $code, "msg" => $msg, "data" => array("src" => $filepath . $title, "title" => $title));
} else {
$ExtFrm = array("code" => $code, "msg" => $msg, "id" => $id, "path" => $filepath, "new_name" => $new_name, "old_name" => $old_name, "file_ext" => $file_ext);
}
exit(json_encode($ExtFrm));
}
} ?>

php + layui 文件上传 以及 拖拽上传的更多相关文章

  1. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  2. 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  3. bat cmd dos 通过拖拽参数 上传 截取拖拽上传文件名

    echo off setlocal enabledelayedexpansion :: L 小写 for /l %%i in (1,1,10000) do ( :con set /p a= selec ...

  4. 用HTML5 File API 实现截图粘贴上传、拖拽上传

    <!DOCTYPE html><html><head> <title>test chrome paste image</title> < ...

  5. 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  6. 实现拖拽上传文件的一款小控件——dropzone

    由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...

  7. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  8. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  9. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  10. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

随机推荐

  1. 利用ldt_struct 与 modify_ldt 系统调用实现任意地址读写

    利用ldt_struct 与 modify_ldt 系统调用实现任意地址读写 ldt_struct与modify_ldt系统调用的介绍 ldt_struct ldt是局部段描述符表,里面存放的是进程的 ...

  2. C#/VB.NET 如何在Excel中使用条件格式设置交替行颜色

    说起高亮数据行,不让人想起了交替颜色行,有的人把交替颜色行也都设置成高亮,不仅不美观,而且对阅读还是个干扰.隔行交替的颜色是为了阅读不串行,这些行只是环境,数据才是主体.那么如何通过C#/VB.NET ...

  3. AVL Tree (1) - Definition, find and Rotation

    1. 定义 (15-1) [AVL tree]: 一棵空二叉树是 AVL tree; 若 T 是一棵非空二叉树, 则 T 满足以下两个条件时, T 是一棵 AVL tree: T_LeftSubtre ...

  4. JAVA SE 基础总结

    § 基础知识 一.程序组织与运行原理 1.1 程序组织 一个 JAVA 程序文件中主要由如下几部分构成: package 声明 public 类:public 类与类文件名相同,因为其是作为该类文件唯 ...

  5. 第六章:Django 综合篇 - 13:发送邮件

    在Python中已经内置了一个smtp邮件发送模块,Django在此基础上进行了简单地封装,让我们在Django环境中可以更方便更灵活的发送邮件. 所有的功能都在django.core.mail中. ...

  6. 修复 Elasticsearch 集群的常见错误和问题

    文章转载自:https://mp.weixin.qq.com/s/8nWV5b8bJyTLqSv62JdcAw 第一篇:Elasticsearch 磁盘使用率超过警戒水位线 从磁盘常见错误说下去 当客 ...

  7. frps服务端与nginx可共用443端口

    转载自: https://www.ioiox.com/archives/78.html frps服务器上的nginx frps.ini配置 由于nginx占用80/443端口,frps.ini中的 v ...

  8. 5_SpringMVC

    一. 什么是MVC框架 MVC全名是Model View Controller, 是模型(model), 视图(view), 控制器(controller)的缩写, 一种软件设计典范, 用一种业务逻辑 ...

  9. P3629 [APIO2010] 巡逻 (树的直径)

    (这道题考察了求直径的两种方法......) 在原图中,每条边要经过两次,增加1条后,形成了一个环,那么环上的边只需要经过一次了(大量画图分析得),再增加一条又会形成一个环,如果这两个环有重叠,重叠部 ...

  10. python提效小工具-统计xmind用例数量

    问题:做测试的朋友们经常会用到xmind这个工具来梳理测试点或写测试用例,但是xmind8没有自带的统计测试用例,其他版本的xmind有些自带节点数量统计功能,但也也不会累计最终的数量,导致统计测试工 ...