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

最新推荐文章于 2025-10-17 18:44:44 发布

chenhailong118

最新推荐文章于 2025-10-17 18:44:44 发布

阅读量123

点赞数

分类专栏： JspAndFaceWeb 文章标签： javascript xhtml php ViewUI

JspAndFaceWeb 专栏收录该内容

66 篇文章

订阅专栏

本文将介绍如何使用HTML和JavaScript实现文件上传功能，并详细解释了上传过程中涉及到的关键步骤及注意事项。

<!DOCTYPE html>

<head>

#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>

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>

<legend>HTML File Upload</legend>

<div>

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

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

</div>

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

</div>

</fieldset>

</form>

<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);