`

JavaScript实现桌面图标推拽直接上传

 
阅读更多

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

#filedrag{

display: none;  

font-weight: bold;  

text-align: center;  

padding: 1em 0;  

margin: 1em 0;  

color: #555;  

border: 2px dashed #555;  

border-radius: 7px;  

cursor: default;  

}

#filedrag.hover{

color: #f00;

border-color: #f00;

border-style: solid;

box-shadow: inset 0 3px 4px #888;

}

#filedrag{

display: none;  

font-weight: bold;  

text-align: center;  

padding: 1em 0;  

margin: 1em 0;  

color: #555;  

border: 2px dashed #555;  

border-radius: 7px;  

cursor: default;  

}

#filedrag.hover{

color: #f00;

border-color: #f00;  

border-style: solid;  

box-shadow: inset 0 3px 4px #888;  

}

</style>

<script type="text/javascript">

window.onload = function(){

if (window.File && window.FileList && window.FileReader) {  

Init();

}

 

// initialize

function Init() {

var fileselect = document.getElementById("fileselect"),  

filedrag = document.getElementById("filedrag"),  

submitbutton =document.getElementById("submitbutton");  

// file select  

fileselect.addEventListener("change", FileSelectHandler, false);  

// is XHR2 available?  

var xhr = new XMLHttpRequest();

if (xhr.upload) {

// file drop

filedrag.addEventListener("dragover", FileDragHover, false);  

filedrag.addEventListener("dragleave", FileDragHover, false);  

filedrag.addEventListener("drop", FileSelectHandler, false);  

filedrag.style.display = "block";  

// remove submit button  

submitbutton.style.display = "none";  

}

}

 

//status output information  

function Output(msg) {  

var m = document.getElementById("messages");  

m.innerHTML = msg + m.innerHTML;  

}

 

function FileDragHover(e) {  

e.stopPropagation();

e.preventDefault();  

e.target.className = (e.type == "dragover" ? "hover" : "");  

}

 

function FileSelectHandler(e) {

// cancel event and hover styling

FileDragHover(e);

// fetch FileList object  

var files = e.target.files || e.dataTransfer.files;  

// process all File objects  

for (var i = 0, f; f = files[i]; i++) {  

ParseFile(f);  

}

}

 

function ParseFile(file) {  

Output(  

"<p>File information: <strong>" + file.name +  

"</strong> type: <strong>" + file.type +  

"</strong> size: <strong>" + file.size +  

"</strong> bytes</p>"  

);

}

}

 

</script>

 

</head>

<body>

 

<div id="output" class="clearfix">

<ul id="output-listing01"></ul>

</div>

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">

<fieldset>

<legend>HTML File Upload</legend>  

<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />

<div>

<label for="fileselect">Files to upload:</label>  

<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />

<div id="filedrag">or drop files here</div>  

</div>

<div id="submitbutton">  

<button type="submit">Upload Files</button>  

</div>

</fieldset>

</form>

<div id="messages">

<p>Status Messages</p>

</div> 

</body>

</html>



javascript 中的经典:

var xhr = new XMLHttpRequest();
xhr.open("post", "/××××", true);
// Set appropriate headers
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("fileName", file.name);
xhr.setRequestHeader("fileSize", file.size);
xhr.setRequestHeader("fileType", file.type);
xhr.setRequestHeader('gridID',gridIDFlag);
var formData = new FormData();
formData.append('myFile',file);
xhr.send(formData);
 
0
3
分享到:
评论

相关推荐

    js 模拟手机桌面,拖拽、合并文件、换位置

    虽然JavaScript本身不支持直接操作文件系统,但可以通过File API来读取和操作上传的文件。例如,可以使用`FileReader`对象的`readAsText`方法读取文件内容,然后将内容合并到一起,最后创建一个新的Blob对象表示合并...

    【JavaScript源代码】vue实现桌面向网页拖动文件的示例代码(可显示图片音频视频).docx

    在Vue.js中实现桌面向网页拖放文件的功能,可以极大地提升用户体验,特别是对于那些需要用户上传多媒体内容(如图片、音频、视频)的应用。以下是一个详细的实现步骤和关键知识点: 1. **事件监听器**: - 使用`v-...

    extjs 图标文件

    ExtJS 4 是一个广泛使用的JavaScript库,它允许开发者创建复杂的、桌面级的Web应用程序。在ExtJS 4中,图标通常用于按钮、菜单项、工具栏等组件,为操作提供清晰的视觉指示。 1. **图标文件格式** ExtJS图标文件...

    macos和windows应用程序的图标生成器

    在这个场景下,JavaScript可能被用来实现图标的上传、预览、转换以及下载等功能。 2. **图标字体**:图标字体是一种将图标作为字体字符来使用的资源,它允许开发者通过CSS控制图标的颜色、大小、阴影等样式属性,且...

    ICO图标获取工具

    用户可以利用内置的画笔、形状工具和滤镜创作图标,同时,软件还提供了大量的图标库供用户参考或直接使用。 除了这些专业工具,开发者也可以通过编程方式获取和处理ICO图标。例如,在JavaScript中,可以使用...

    滚动图标滚动菊花等待图标

    在提供的文件名称列表中,“ajax等待图标”可能是指与AJAX(异步JavaScript和XML)技术相关的等待图标,这类图标通常在网页进行异步更新时出现;“等待动态图标”涵盖更广泛的动态等待图标;“loading”是英文“加载...

    简洁.ico图标在线制作网站程序源码源码资源下载整理.zip

    .ico是Windows操作系统中的一种图标文件格式,它可以包含多尺寸、多颜色深度的图像,常用于网页浏览器的收藏夹图标、桌面快捷方式等。该程序源码提供了一个平台,让用户能够方便地在线制作或编辑这种图标。 【描述...

    jQuery支持预览多个文件_多张图片批量上传插件

    总的来说,这个插件结合了jQuery的便利性和Web Uploader的强大功能,提供了一个高效、易用的多张图片批量上传解决方案,无论是桌面还是移动环境,都能提供良好的用户体验。开发者只需要根据自己的需求进行适当的配置...

    JS网页模拟windows操作系统桌面后台管理框架

    6. **文件系统**:虽然JavaScript在浏览器环境下不能直接访问本地文件系统,但可以通过模拟的文件浏览器或者使用Web API(如FileReader和FileWriter)来模拟文件的浏览、上传和下载。 7. **菜单和对话框**:实现...

    Loading 等待图标 65个

    开发者可以通过JavaScript、CSS或者专门的动画库来控制图标的显示和隐藏,以实现精确的交互同步。 7. **响应速度**:尽管等待图标能提高用户体验,但过度依赖它们可能会暗示系统性能问题。因此,优化代码和减少加载...

    7种时尚的文件上传表单域美化特效

    HTML5引入了拖放API,允许用户直接将文件从桌面拖放到网页上。通过监听`dragenter`, `dragleave`, 和 `drop`事件,可以实现优雅的拖放效果,并在用户释放鼠标时触发文件上传。 4. **实时预览**: 对于图像文件,...

    一款漂亮的网站桌面

    电脑桌面作为用户与操作系统交互的主要界面,其易用性和美观度直接影响到用户的使用体验。 在【压缩包子文件的文件名称列表】中,我们看到一个名为"kodexplorer2.61"的文件。这很可能是该Web Desktop系统的名称,...

    在网上找到这个经典文件夹图标,希望能喜欢

    描述中提到“png格式的,做上传文件时要给树形结构加上一个图标”,这暗示了这些PNG图标可能被用于增强文件上传功能的界面,使树状目录结构更易读,提升用户对文件层级关系的感知。 在文件管理界面中,图标不仅仅是...

    bootstrap-fileinput文件上传组件

    3. **拖放上传**:Bootstrap-fileinput支持拖放功能,用户可以直接从桌面或文件管理器中拖动文件到指定区域进行上传,简化了上传步骤。 4. **多线程上传**:通过使用HTML5的File API,该组件可以实现多文件并发上传...

    5000个常用到extjs小图标

    EXTJS是一种基于JavaScript的开源富客户端框架,由Sencha公司开发,主要用于构建桌面级Web应用程序。EXTJS提供了丰富的组件库,包括数据绑定、表格、树形视图、表单、图表等多种功能,使得开发者能够创建出功能强大...

    5000个ICO图标文件

    在编程环境中,可以使用特定的库或API来处理ICO文件,例如在JavaScript中可以使用`FileReader` API读取和显示图标,而在.NET框架中,可以利用`System.Drawing.Icon`类进行操作。在网站上设置favicon(网站图标)时,...

    jquery在线模拟linux系统桌面效果.rar

    3. **CSS3**:用于样式设计,实现Linux桌面主题,包括窗口边框、图标样式、任务栏布局等。 4. **JavaScript**:与jQuery一起,用于编写交互逻辑,如拖放功能、窗口最大化/最小化/关闭、文件操作等。 5. **AJAX**:...

    图片上传样式美化

    9. **响应式设计**:考虑到不同设备和屏幕尺寸,图片上传样式应具备良好的响应性,确保在手机、平板和桌面设备上都能正常工作。 10. **后端处理**:虽然重点在于前端样式美化,但后端处理同样重要。包括图片的存储...

    web桌面主题.zip

    4. **文件管理**:Web桌面主题可能包括了文件浏览器或者虚拟文件系统,让用户能在浏览器中浏览、上传、下载和管理文件,这通常通过AJAX技术实现,使得文件操作能够异步进行,无需刷新整个页面。 5. **应用程序集成*...

    boostrap拖动文件批量上传插件

    在这款插件中,这个特性被用来实现文件的拖放上传。用户只需将文件从桌面或文件管理器拖放到指定区域,即可触发上传过程。 2. **jQuery**: jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理、动画...

Global site tag (gtag.js) - Google Analytics