html文件拖拽上传文件
Ⅰ html拖拽效果怎么实现
<!DOCTYPEHTML>
<html>
<metacharset="UTF-8">
<title>test</title>
<head>
<styletype="text/css">
div{
width:80px;
height:80px;
padding:10px;
margin:10px;
border:1pxsolid#aaaaaa;
}
img{
width:50px;
height:50px;
}
img:hover,
img:active{
width:55px;
height:55px;
}
</style>
<scripttype="text/javascript">
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<h2>请把喵喵拖放到里面：</h2>
<divondrop="散册租drop(event)"ondragover="allowDrop(event)"></div>
<divondrop="drop(event)"ondragover="allowDrop(event)"></div>
<imgid="img"src="http://img6.bdstatic.com/img/image/smallpic/chongwu1124.jpg"alt="赶紧拖动我"title="赶紧拖姿清动我"draggable="true"ondragstart="drag(event)"/>
</body>
</html>
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被冲兆拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中
Ⅱ C# .NET从操作系统直接拖拽文件，并上传到服务器。求html5具体代码
这个和html5 没有关系， 和浏览器有关系， 可以给你两穗档哗个方向，
第一： 如果你是使用的IE系列的浏览器， 那么只有一种方式，编猜行写一个Active X控件，这个可以完成，但是比较复杂， 不过windows 的all in one framework里面有用C#编写Active X 控件的例子，你可以参考一下， 如果能用..net 开发的话，这个拖拽功能网上一大片的代码，自己搜索一下，主蠢绝要是要搞定那个Active X控件。也可以用C++ 来编写， 这个有很多的模板。
第二， 如果你是用IE之外的，如火狐， chorme之类的， 你可以参考一下 网络 google 等写的js代码， 这些搜索引擎的图片搜索里面有一个以图找图， 这个是用js实现的， 好像叫做 dragdrop.js的，你打开这个页面就能看到这个js ，自己下载吧
Ⅲ 如何使用HTML5+JSP实现文件夹拖拽上传操作，不用php
那你去JSP里面提问啊，
不用PHP你来PHP模块提问干嘛？
Ⅳ htmlinput可以拖拉导入文件吗
可以。htmlinput用户桐州是余念可以拖拉导入文件的。input是HTML中的一个输入框标签，标签规定了用户可以在竖轮困其中输入数据的输入字段。
Ⅳ 如何在你的网站上提供文件供下载
目录方法1：使用HTML代码1、如果没有网页，先创建一个HTML网页。2、在服务器上打开网页和文件所在的文件夹。3、上传你想要连接的文件。4、在代码编辑器中打开你想要添加链接的页面。5、在网页上找到你想要添加链接的位置。6、添加链接代码。7、创建下载按钮。8、重命名下载文件。9、保存更改。方法2：使用WordPress编辑器1、在WordPress网站编辑器中打开网页。2、把光标放到出现链接的位置。3、点击“添加多媒体”按钮。4、点击“上传文件”选项卡蠢让，将文件拖拽到窗口中。5、添加文件描述。6、点击“插入到帖子/页面中”按钮，将下载链接插入到光标所在位置。方法3：使用“Weebly”编辑器1、在Weebly编辑器中打开网页。2、选择你想要转换为链接的文本或对象。3、点击“链接”按钮。4、选择“文件”，然后点击“上传文件”。5、选择目标文件。6、发布网页，查看链接。方法4：使用“Wix”编辑器1、在Wix编辑器中打开网站。2、选择你想要转换为链接的文本或图片。3、把选中的对象变成链接。4、从链接选项列表里选择“文档”。5、点击“选择文件”按钮，打开文件上传程序。6、将文件拖拽到上传窗口。7、发布网站。方法5：使用“GoDaddy”1、在GoDaddy网站编辑器中打开网页。2、选择你想要转换为链接的文本或对象。3、将选中的文本或对象创建为链接。4、点击“链接（URL）”下方的红色箭头，选择“上传”。5、点击“浏览”按钮，找到你想要上传的文件。6、上传完文件后，点击“插入”。7、点击“保存”按钮创建链接。8、点击“发布”保存网页更改。访客都希望网站的创建者能够提供文件的下载链接。事实上，创建者们会通过多种方式来满足用户这一需求。许多网站创建和编辑工具都能够在你上传文件的同时创建文件链接，让文件变得可供下载，比如GoDaddy、WordPress和Weebly。如果使用“scratch”创建网站，还可以使用简单的HTML网页代码来为存储在服务器上的文件创建下载链接。
方法1：使用HTML代码
1、如果没有网页，先创建一个HTML网页。你需要向网页中添加文件的下载链接。因此，你需要拥有一个网站。如果没有创建好的网站，可以创建一个简单的网页来测试下载链接。查阅用HTML创建一个简单网页，了解详细信息。
2、在服务器上打开网页和文件所在的文件夹。将文件放到网页文件所在的文件夹，这是最简单的链接方式。使用文件管理器控制面板或FTP程序里的文件浏览器，进入网页文件所在的文件夹，然后准备向网页添加链接。由于之前曾向服务器上传过网页文件，因此，FTP客户端应该已经连接到网页服务器。如果没有连接服务器，查阅如何使用FTP，了解将FTP客户端连接到服务器的方法。
如果网站服务器有在线控制面板，则可以通过网页管理器界面直接访问服务器文件。你需要以管理员身份登录管理器，进入控制面板后，选择“文件管理器”选项。
如果使用网站创建工具来创建网站，比如WordPress、Weebly或Wix，查阅下方对应于各平台的创建方法。
3、上传你想要连接的文件。你可以上传多种类型的文件，包括PDF、ZIP等文件。注意，有些服务器会限制上传文件的大小，较大的文件会占用大部分网速。有些浏览器会阻止访客下载EXE或DLL文件，以拦截恶意程序和广告软件。如果想要使用FTP程序上传文件，将文件拖拽到FTP窗口中你想要上传到的文件夹中。接着系统会立刻开始上传文件。上传速度会稍慢于下载速度，几分钟后才会完成上传。
如果使用文件管理器的虚拟控制面板，点击窗口顶部的“上传”按钮，浏览计算机，找到你想要上传的文件。较大的文件需要橘派花一些时间才能上传到服务器。
4、在代码编辑器中打开你想要添加链接的页面。上传好文件后，你需要在网页上添加链接。打开你想要添加链接的网页文件。在文件管理器控制面板中，双击HTML文件，在内置的页面编辑器中打开它。如果使用FTP，右键点击HTML文件，使用“打开方式”选项来选择在代码编辑器或文本编辑器中将它打开。
5、在网页上找到你想要添加链接的位置。将光标放到想要插入下载链接的位置，可以是正文的一个段落，也可以是页面底部或其它位置。
6、添加链接代码。输入下载链接的网页代码。这样，带伍局用户在点击链接后，就会立刻开始下载。如果下载文件位于HTML文件所在的文件夹，那么你需要使用文件名称和扩展名。如果位于不同的文件夹，还需要添加文件夹结构。
<!-- Uploaded file in same location as HTML file --><a href="examplefile.pdf" download>Link text</a><!-- Uploaded file in different location than HTML file --><a href="/path/to/file/examplefile2.jpg" download>Link text</a><a> download属性不适用于Safari、IE或Opera Mini浏览器。使用这些浏览器的用户会在新页面中打开文件，并需要手动保存它。
7、创建下载按钮。你可以使用图片，而不是文本来创建下载链接。这需要使用网页服务器上已有的按钮图片。
<a href="examplefile.pdf" download><img src="/images/downloadbutton.jpg"></a>
8、重命名下载文件。如果确定<a> download属性，可以在他人下载文件时更改文件的名称。这样能方便用户识别下载的文件。
<a href="083116sal_rep.pdf" download="August 31 2016 Sales Report">Download the report</a>
9、保存更改。更改完代码后，保存HTML文件，如果需要，可以重新上传它。这时候，你应该能够在网站上看到新的下载按钮或链接。
方法2：使用WordPress编辑器
1、在WordPress网站编辑器中打开网页。如果使用WordPress来管理和创建网站，那么可以用程序内置工具添加链接。使用管理员账户登录“WordPress”。
2、把光标放到出现链接的位置。可以是正文的中央，也可以创建新的一行。
3、点击“添加多媒体”按钮。它位于页面顶部的工具栏里。
4、点击“上传文件”选项卡，将文件拖拽到窗口中。你可以上传各种类型的文件，但是，“WordPress”程序会根据你的账户类型限制文件大小。由于大部分上传速度比下载速度更慢，因此，上传文件需要花费一段时间。
5、添加文件描述。在“添加多媒体”窗口的文件下方输入文件描述。这段文本会显示为下载链接文本。
6、点击“插入到帖子/页面中”按钮，将下载链接插入到光标所在位置。注意，它会连接到附件页面，而不是实际的文件。这就是WordPress程序的缺陷。
方法3：使用“Weebly”编辑器
1、在Weebly编辑器中打开网页。登录Weebly网站，在编辑器中打开网页。
2、选择你想要转换为链接的文本或对象。你可以高亮标记文本或选择一张图片，把它变成文件的下载链接。
3、点击“链接”按钮。选中文本后，找到链接按钮。它看上去像是一个链条，位于文本编辑器顶部。选中图片后，点击图片控制面板里的“链接”。
4、选择“文件”，然后点击“上传文件”。打开文件浏览器。
5、选择目标文件。选中后，开始上传文件。大众用户最多上传5MB的文件，会员可以上传100MB的文件。
6、发布网页，查看链接。上传完文件后，就可以使用链接了。点击“发布”按钮，保存网页更改。此时，访客可以点击链接，下载文件了。
方法4：使用“Wix”编辑器
1、在Wix编辑器中打开网站。如果使用Wix创建和管理网站，先登录网站，在编辑器中打开网页。
2、选择你想要转换为链接的文本或图片。你可以将网页上的文本或图片创建为下载链接。
3、把选中的对象变成链接。文本和图片的操作有点差异：文本 - 点击“文本设置”窗口里的链接按钮。按钮看上去像是一个链条，这会打开“链接”菜单。
图片 - 在“图片设置”窗口里的“点击图片”菜单中，选择“打开链接”。点击“链接是做什么的？”部分里的“添加链接”。打开链接菜单。
4、从链接选项列表里选择“文档”。你可以上传各种各样的文档文件。
5、点击“选择文件”按钮，打开文件上传程序。
6、将文件拖拽到上传窗口。你只能上传DOC、PDF、PPT、XLS和ODT文件，以及它们的子格式文件。文件大小在15MB以内。
7、发布网站。上传文件后，发布网站。点击右上角的“发布”按钮，保存网页更改，测试下载链接。
方法5：使用“GoDaddy”
1、在GoDaddy网站编辑器中打开网页。 如果使用GoDaddy网站创建网页，先登录网站，在编辑器中打开网页。
2、选择你想要转换为链接的文本或对象。你可以将网页上的任何对象创建为下载链接，包括文本框中的文本。如果想要创建下载按钮，点击左侧菜单里的“按钮”选项，插入按钮。
3、将选中的文本或对象创建为链接。如果选中了一个物体，点击“设置”按钮打开菜单。如果选中文本，点击文本格式工具里的“链接”按钮，按钮的图标像是一个链条。
4、点击“链接（URL）”下方的红色箭头，选择“上传”。这允许你选择想要上传的文件。
5、点击“浏览”按钮，找到你想要上传的文件。文件的大小最大为30MB。你无法上传HTML、PHP、EXE、DLL和其它可能有危险的文件类型。
6、上传完文件后，点击“插入”。完成上传后，窗口中文件的旁边会出现一个对勾。
7、点击“保存”按钮创建链接。点击“保存”，将创建的文本或对象链接应用到文件。
8、点击“发布”保存网页更改。创建链接后，访客可以点击链接下载文件。
Ⅵ html5拖拽图片上传，怎么获得图片原始尺寸
用后台语言去获取不就可以了。为什么一定要在前端来获取图片原始大小呢？即使你要在前端实用，比如PHP获取到了以后还是可以通过变量传递给前端的。至于PHP怎么获取图片原始大小这个网上很容易找到资料！
Ⅶ sublime text 3写的html文件如何上传到服务器
在FTP软件中，选中文件，选择编辑方式，选择sublime编辑。
编辑后保存，自动上传到服务器。
推荐使用Transmit
Ⅷ HTML5拖拽事件
图片自带拖拽功能
其他元素可设置draggable属性
例子:
https://element.eleme.cn/#/zh-CN ---》组件（菜单）---》Tree树形控件---》可拖拽节点（右侧）
只作为了解, 因为现在火狐已经没有兼容问题
火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签
火狐在没有添加dataTransfer前不能使用ondrag和ondragend事件,其他都可以
dataTransfer 是 拖拽事件对象的属性
，参考上面的例子
通过FileReader对象可以读取本地存储的文件信息, 使用File对象 指定要读取的文件数据
HTML5 新增的内置构造函数,可以读取本地文件的信息
性能低,没有必要吧这些字符串渲染到页面中
读取拖入的图片信息，并显示在页面上
多文件的拖入上传
利用FileReader读取信息
Ⅸ 怎样用html5实现拖拽上传文件
，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片！");
return false;
}
//拖拉图片到浏览器，可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //图片名称
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上传大小不能超过500K.");
return false;
}
var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>";
$("#preview").html(str);
//上传
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
Ⅹ html5 图片上传 可收缩 拖拽
可以参腔睁考chrome小乐图搏扒客扩展的截图功能，支持粘贴剪贴板图片、拖拽图片、或者粘贴图片网址上传，是通基圆昌过html5 file reader实现的。