在javascript中拖放功能 [英] Drag and drop feature in javascript
本文介绍了在javascript中拖放功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何通过使用JavaScript添加拖放功能来支持我的网站。如果有人有用的参考或例子;因为我在这方面完全失明。
谢谢:)
我要拖放的东西可能是一个div或预定义对象。
解决方案
这是一个简单的代码，用于从您的桌面拖动一个/许多文件到一个网页，并上传该文件。
请注意，它包含HTML5选项，因此IE9及更低版本不支持。
$（$（$）
$（document）.ready（function（）{
var dropbox = document.getElementById ）
// init事件处理程序
dropbox.addEventListener（dragenter，dragEnter，false）;
dropbox.addEventListener（dragexit，dragExit，false）;
dropbox.addEventListener（dragover，dragOver，false）;
dropbox.addEventListener（drop，drop，false）;
// init小部件
$ （#progressbar）。progressbar（）;
}）;
函数dragEnter（evt）{
evt.stopPropagation（）;
evt.preventDefault（）;
}
函数dragExit（evt）{
evt.stopPropagation（）;
evt.preventDefault（）;
}
函数dragOver（evt）{
evt.stopPropagation（）;
evt.preventDefault（）;
}
函数drop（evt）{
evt.stopPropagation（）;
evt.preventDefault（）;
var files = evt.dataTransfer.files;
var count = files.length;
//只有在删除了一个或多个文件时才调用该处理程序。
if（count> 0）
handleFiles（files）;
}
函数handleFiles（files）{
var file = files [0];
document.getElementById（droplabel）。innerHTML =Processing+ file.name;
// var sampleText = document.getElementById（sampleText）。
// var sampleFile = document.getElementById（sampleFile）。files [0];
var formdata = new FormData（）;
formdata.append（sampleText，ppppppp）;
formdata.append（sampleFile，file）;
var xhr = new XMLHttpRequest（）;
xhr.open（POST，/ EHF / dataentry？，true）;
xhr.send（formdata）;
xhr.onload = function（e）{
if（this.status == 200）{
alert（this.responseText）;
}
};
var reader = new FileReader（）;
// init读者事件处理程序
reader.onprogress = handleReaderProgress;
reader.onloadend = handleReaderLoadEnd;
//开始阅读操作
reader.readAsDataURL（file）;
}
函数handleReaderProgress（evt）{
if（evt.lengthComputable）{
var loaded =（evt.loaded / evt.total）;
$（＃progressbar）。progressbar（{value：loaded * 100}）;
}
}
函数handleReaderLoadEnd（evt）{
$（＃progressbar）。progressbar（{value：100}）;
var img = document.getElementById（preview）;
img.src = evt.target.result;
}
/ p>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp：// www .w3.org / TR / XHTML1 / DTD / XHTML1-strict.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< link rel =stylesheettype =text / csshref =dndimg.css>
< link rel =stylesheettype =text / csshref =jquery-ui-1.8.1.custom.css>
< script src =http://www.google.com/jsapi?key=ABQIAAAADYbHHQrNWPElNtE4hn2g1hQhn5tTlmnhbGVHENfXgw8ik0kvARSWpfuAdtdt1KqinQpUokxB7SpcsQ
type =text / javascript>< / script>
< script type =text / javascript>
google.load（jquery，1）;
google.load（jqueryui，1）;
< / script>
< script type =text / javascriptsrc =draganddrop.js>< / script>
< / head>
< body>
< div id =dropbox>< span id =droplabel>在这里删除文件...< / span>
< div id =progressbar>< / div>
< / div>
< br />
< img id =previewsrc =alt =[预览将在此显示]/>
< / body>
< / html>
#dropbox {
width：425px;
height：300px;
border：2px solid #DDD;
-moz-border-radius：8px;
-webkit-border-radius：8px;
background-color：#FEFFEC;
text-align：center;
颜色：#BBB;
font-size：2em;
font-family：Arial，sans-serif;
}
#progressbar {
margin-left：20px;
margin-right：20px;
position：relative;
顶部：75％;
}
#droplabel {
position：relative;
顶部：40％;
}
/ p>
/ *
* jQuery UI CSS框架
*版权所有（c）2010 AUTHORS.txt（http： //jqueryui.com/about）
*根据MIT（MIT-LICENSE.txt）和GPL（GPL-LICENSE.txt）许可证进行双重许可。
* /
/ *布局助手
---------------------------- ------ * /
.ui-helper-hidden {display：none; }
.ui-helper-hidden-accessible {position：absolute;左：-99999999px; }
.ui-helper-reset {margin：0;填充：0;边界：0;大纲：0;线高：1.3;文字装饰：无; font-size：100％; list-style：none; }
.ui-helper-clearfix：after {content：。;显示：块;身高：0;清楚：两者;能见度：隐藏; }
.ui-helper-clearfix {display：inline-block; }
/ *需要在clearfix上工作的注释在Opera \ * /
* html .ui-helper-clearfix {height：1％; }
.ui-helper-clearfix {display：block; }
/ * end clearfix * /
.ui-helper-zfix {width：100％;身高：100％;顶部：0;左：0;位置：绝对不透明度：0;滤波器：阿尔法（不透明度= 0）; }
/ *互动提示
----------------------------- ----- * /
.ui-state-disabled {cursor：default！important; }
/ *图标
------------------------------ ---- * /
/ *状态和图像* /
.ui-icon {display：block;文本缩进：-99999px;溢出：隐藏背景重复：不重复; }
/ *混合视觉
----------------------------- ----- * /
/ *覆盖* /
.ui-widget-overlay {position：absolute;顶部：0;左：0;宽度：100％;身高：100％;
/ *
* jQuery UI CSS框架
*版权所有（c）2010 AUTHORS.txt（http://jqueryui.com/about）
*根据MIT（MIT-LICENSE.txt）和GPL（GPL-LICENSE.txt）许可证进行双重许可。
*要查看和修改此主题，请访问http://jqueryui.com/themeroller/?ffDefault=Lucida%20Grande,%20Lucida%20Sans,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1 EM&安培; cornerRadius = 6个像素和安培; bgColorHeader = deedf7&安培; bgTextureHeader = 03_highlight_soft.png&安培; bgImgOpacityHeader = 100安培; borderColorHeader = aed0ea&安培; fcHeader = 222222&安培; iconColorHeader = 72a7cf&安培; bgColorContent = f2f5f7&安培; bgTextureContent = 04_highlight_hard.png&安培; bgImgOpacityContent = 100安培; borderColorContent = DDDDDD&安培; fcContent = 362b36&安培; iconColorContent = 72a7cf&安培; bgColorDefault = d7ebf9&安培; bgTextureDefault = 02_glass.png&安培; bgImgOpacityDefault = 80安培; borderColorDefault = aed0ea&安培; fcDefault = 2779aa&安培; iconColorDefault = 3d80b3&安培; bgColorHover = e4f1fb&安培; bgTextureHover = 02_glass.png&安培; bgImgOpacityHover = 100安培; borderColorHover = 74b2e2&安培; fcHover = 0070a3&安培; iconColorHover = 2694e8&安培; bgColorActive = 3baae3&安培; bgTextureActive = 02_glass.png&安培; bgImgOpacityActive = 50&安培; borderColorActive = 2694e8&安培; fcActive = FFFF FF&安培; iconColorActive = FFFFFF&安培; bgColorHighlight = ffef8f&安培; bgTextureHighlight = 03_highlight_soft.png&安培; bgImgOpacityHighlight = 25安培; borderColorHighlight = f9dd34&安培; fcHighlight = 363636&安培; iconColorHighlight = 2e83ff&安培; bgColorError = cd0a0a&安培; bgTextureError = 01_flat.png&安培; bgImgOpacityError = 15&安培; borderColorError = cd0a0a&安培; fcError = FFFFFF&安培; iconColorError = FFFFFF&安培; bgColorOverlay = EEEEEE&安培; bgTextureOverlay = 08_diagonals_thick.png&安培; bgImgOpacityOverlay = 90&安培; opacityOverlay = 80安培; bgColorShadow = 000000&安培; bgTextureShadow = 04_highlight_hard.png&安培; bgImgOpacityShadow = 70安培; opacityShadow = 30&安培; thicknessShadow = 7px的&安培; offsetTopShadow = -7px& offsetLeftShadow = -7px& cornerRadiusShadow = 8px
* /
/ *组件容器
------------- --------------------- * /
.ui-widget {font-family：Lucida Grande，Lucida Sans，Arial，sans-serif; font-size：1.1em; }
.ui-widget .ui-widget {font-size：1em;
.ui-widget input，.ui-widget select，.ui-widget textarea，.ui-widget button {font-family：Lucida Grande，Lucida Sans，Arial，sans-serif; font-size：1em; }
.ui-widget-content {border：1px solid #dddddd;背景：＃f2f5f7 url（images / ui-bg_highlight-hard_100_f2f5f7_1x100.png）50％top repeat-x;颜色：＃362b36; }
.ui-widget-content a {color：＃362b36; }
.ui-widget-header {border：1px solid＃aed0ea;背景：＃deedf7 url（images / ui-bg_highlight-soft_100_deedf7_1x100.png）50％50％repeat-x;颜色：＃222222; font-weight：bold; }
.ui-widget-header a {color：＃222222; }
/ *互动状态
--------------------------------- - * /
.ui-state-default，.ui-widget-content .ui-state-default，.ui-widget-header .ui-state-default {border：1px solid＃aed0ea;背景：＃d7ebf9 url（images / ui-bg_glass_80_d7ebf9_1x400.png）50％50％repeat-x; font-weight：bold;颜色：＃2779aa; }
.ui-state-default a，.ui-state-default a：link，.ui-state-default a：visited {color：＃2779aa;文字装饰：无; }
.ui-state-hover，.ui-widget-content .ui-state-hover，.ui-widget-header .ui-state-hover，.ui-state-focus，.ui-widget-内容.ui-state-focus，.ui-widget-header .ui-state-focus {border：1px solid＃74b2e2;背景：＃e4f1fb url（images / ui-bg_glass_100_e4f1fb_1x400.png）50％50％repeat-x; font-weight：bold;颜色：＃0070a3; }
.ui-state-hover a，.ui-state-hover a：hover {color：＃0070a3;文字装饰：无; }
.ui-state-active，.ui-widget-content .ui-state-active，.ui-widget-header .ui-state-active {border：1px solid＃2694e8;背景：＃3baae3 url（images / ui-bg_glass_50_3baae3_1x400.png）50％50％repeat-x; font-weight：bold;颜色：#ffffff; }
.ui-state-active a，.ui-state-active a：link，.ui-state-active a：visited {color：#ffffff;文字装饰：无; }
.ui-widget：active {outline：none; }
/ *互动线索
--------------------------------- - * /
.ui-state-highlight，.ui-widget-content .ui-state-highlight，.ui-widget-header .ui-state-highlight {border：1px solid＃f9dd34;背景：＃ffef8f url（images / ui-bg_highlight-soft_25_ffef8f_1x100.png）50％top repeat-x;颜色：＃363636; }
.ui-state-highlight a，.ui-widget-content .ui-state-highlight a，.ui-widget-header .ui-state-highlight a {color：＃363636; }
.ui-state-error，.ui-widget-content .ui-state-error，.ui-widget-header .ui-state-error {border：1px solid＃cd0a0a;背景：＃cd0a0a url（images / ui-bg_flat_15_cd0a0a_40x100.png）50％50％repeat-x;颜色：#ffffff; }
.ui-state-error a，.ui-widget-content .ui-state-error a，.ui-widget-header .ui-state-error a {color：#ffffff; }
.ui-state-error-text，.ui-widget-content .ui-state-error-text，.ui-widget-header .ui-state-error-text {color：#ffffff; }
.ui-priority-primary，.ui-widget-content .ui-priority-primary，.ui-widget-header .ui-priority-primary {font-weight：bold; }
.ui-priority-secondary，.ui-widget-content .ui-priority-secondary，.ui-widget-header .ui-priority-secondary {opacity：.7;滤波器：阿尔法（不透明度= 70）; font-weight：normal; }
.ui-state-disabled，.ui-widget-content .ui-state-disabled，.ui-widget-header .ui-state-disabled {opacity：.35;滤波器：阿尔法（不透明度= 35）; background-image：none; }
/ *图标
---------------------------------- * /
/ *状态和图像* /
.ui-icon {width：16px; height：16px; background-image：url（images / ui-icons_72a7cf_256x240.png）; }
.ui-widget-content .ui-icon {background-image：url（images / ui-icons_72a7cf_256x240.png）; }
.ui-widget-header .ui-icon {background-image：url（images / ui-icons_72a7cf_256x240.png）; }
.ui-state-default .ui-icon {background-image：url（images / ui-icons_3d80b3_256x240.png）; }
.ui-state-hover .ui-icon，.ui-state-focus .ui-icon {background-image：url（images / ui-icons_2694e8_256x240.png）; }
.ui-state-active .ui-icon {background-image：url（images / ui-icons_ffffff_256x240.png）; }
.ui-state-highlight .ui-icon {background-image：url（images / ui-icons_2e83ff_256x240.png）; }
.ui-state-error .ui-icon，.ui-state-error-text .ui-icon {background-image：url（images / ui-icons_ffffff_256x240.png）; }
/ *定位* /
.ui-icon-carat-1-n {background-position：0 0; }
.ui-icon-carat-1-ne {background-position：-16px 0; }
.ui-icon-carat-1-e {background-position：-32px 0; }
.ui-icon-carat-1-se {background-position：-48px 0; }
.ui-icon-carat-1-s {background-position：-64px 0; }
.ui-icon-carat-1-sw {background-position：-80px 0; }
.ui-icon-carat-1-w {background-position：-96px 0; }
.ui-icon-carat-1-nw {background-position：-112px 0; }
.ui-icon-carat-2-n-s {background-position：-128px 0; }
.ui-icon-carat-2-e-w {background-position：-144px 0; }
.ui-icon-triangle-1-n {background-position：0 -16px; }
.ui-icon-triangle-1-ne {background-position：-16px -16px; }
.ui-icon-triangle-1-e {background-position：-32px -16px; }
.ui-icon-triangle-1-se {background-position：-48px -16px; }
.ui-icon-triangle-1-s {background-position：-64px -16px; }
.ui-icon-triangle-1-sw {background-position：-80px -16px; }
.ui-icon-triangle-1-w {background-position：-96px -16px; }
.ui-icon-triangle-1-nw {background-position：-112px -16px; }
.ui-icon-triangle-2-n-s {background-position：-128px -16px; }
.ui-icon-triangle-2-e-w {background-position：-144px -16px; }
.ui-icon-arrow-1-n {background-position：0 -32px; }
.ui-icon-arrow-1-ne {background-position：-16px -32px; }
.ui-icon-arrow-1-e {background-position：-32px -32px; }
.ui-icon-arrow-1-se {background-position：-48px -32px; }
.ui-icon-arrow-1-s {background-position：-64px -32px; }
.ui-icon-arrow-1-sw {background-position：-80px -32px; }
.ui-icon-arrow-1-w {background-position：-96px -32px; }
.ui-icon-arrow-1-nw {background-position：-112px -32px; }
.ui-icon-arrow-2-n-s {background-position：-128px -32px; }
.ui-icon-arrow-2-ne-sw {background-position：-144px -32px; }
.ui-icon-arrow-2-e-w {background-position：-160px -32px; }
.ui-icon-arrow-2-se-nw {background-position：-176px -32px; }
.ui-icon-arrowstop-1-n {background-position：-192px -32px; }
.ui-icon-arrowstop-1-e {background-position：-208px -32px; }
.ui-icon-arrowstop-1-s {background-position：-224px -32px; }
.ui-icon-arrowstop-1-w {background-position：-240px -32px; }
.ui-icon-arrowthick-1-n {background-position：0 -48px; }
.ui-icon-arrowthick-1-ne {background-position：-16px -48px; }
.ui-icon-arrowthick-1-e {background-position：-32px -48px; }
.ui-icon-arrowthick-1-se {background-position：-48px -48px; }
.ui-icon-arrowthick-1-s {background-position：-64px -48px; }
.ui-icon-arrowthick-1-sw {background-position：-80px -48px; }
.ui-icon-arrowthick-1-w {background-position：-96px -48px; }
.ui-icon-arrowthick-1-nw {background-position：-112px -48px; }
.ui-icon-arrowthick-2-n-s {background-position：-128px -48px; }
.ui-icon-arrowthick-2-ne-sw {background-position：-144px -48px; }
.ui-icon-arrowthick-2-e-w {background-position：-160px -48px; }
.ui-icon-arrowthick-2-se-nw {background-position：-176px -48px; }
.ui-icon-arrowthickstop-1-n {background-position：-192px -48px; }
.ui-icon-arrowthickstop-1-e {background-position：-208px -48px; }
.ui-icon-arrowthickstop-1-s {background-position：-224px -48px; }
.ui-icon-arrowthickstop-1-w {background-position：-240px -48px; }
.ui-icon-arrowreturnthick-1-w {background-position：0 -64px; }
.ui-icon-arrowreturnthick-1-n {background-position：-16px -64px; }
.ui-icon-arrowreturnthick-1-e {background-position：-32px -64px; }
.ui-icon-arrowreturnthick-1-s {background-position：-48px -64px; }
.ui-icon-arrowreturn-1-w {background-position：-64px -64px; }
.ui-icon-arrowreturn-1-n {background-position：-80px -64px; }
.ui-icon-arrowreturn-1-e {background-position：-96px -64px; }
.ui-icon-arrowreturn-1-s {background-position：-112px -64px; }
.ui-icon-arrowrefresh-1-w {background-position：-128px -64px; }
.ui-icon-arrowrefresh-1-n {background-position：-144px -64px; }
.ui-icon-arrowrefresh-1-e {background-position：-160px -64px; }
.ui-icon-arrowrefresh-1-s {background-position：-176px -64px; }
.ui-icon-arrow-4 {background-position：0 -80px; }
.ui-icon-arrow-4-diag {background-position：-16px -80px; }
.ui-icon-extlink {background-position：-32px -80px; }
.ui-icon-newwin {background-position：-48px -80px; }
.ui-icon-refresh {background-position：-64px -80px; }
.ui-icon-shuffle {background-position：-80px -80px; }
.ui-icon-transfer-e-w {background-position：-96px -80px; }
.ui-icon-transferthick-e-w {background-position：-112px -80px; }
.ui-icon-folder-collapsed {background-position：0 -96px; }
.ui-icon-folder-open {background-position：-16px -96px; }
.ui-icon-document {background-position：-32px -96px; }
.ui-icon-document-b {background-position：-48px -96px; }
.ui-icon-note {background-position：-64px -96px; }
.ui-icon-mail-closed {background-position：-80px -96px; }
.ui-icon-mail-open {background-position：-96px -96px; }
.ui-icon-suitcase {background-position：-112px -96px; }
.ui-icon-comment {background-position：-128px -96px; }
.ui-icon-person {background-position：-144px -96px; }
.ui-icon-print {background-position：-160px -96px; }
.ui-icon-trash {background-position：-176px -96px; }
.ui-icon-locked {background-position：-192px -96px; }
.ui-icon-unlocked {background-position：-208px -96px; }
.ui-icon-bookmark {background-position：-224px -96px; }
.ui-icon-tag {background-position：-240px -96px; }
.ui-icon-home {background-position：0 -112px; }
.ui-icon-flag {background-position：-16px -112px; }
.ui-icon-calendar {background-position：-32px -112px; }
.ui-icon-cart {background-position：-48px -112px; }
.ui-icon-pencil {background-position：-64px -112px; }
.ui-icon-clock {background-position：-80px -112px; }
.ui-icon-disk {background-position：-96px -112px; }
.ui-icon-calculator {background-position：-112px -112px; }
.ui-icon-zoomin {background-position：-128px -112px; }
.ui-icon-zoomout {background-position：-144px -112px; }
.ui-icon-search {background-position：-160px -112px; }
.ui-icon-wrench {background-position：-176px -112px; }
.ui-icon-gear {background-position：-192px -112px; }
.ui-icon-heart {background-position：-208px -112px; }
.ui-icon-star {background-position：-224px -112px; }
.ui-icon-link {background-position：-240px -112px; }
.ui-icon-cancel {background-position：0 -128px; }
.ui-icon-plus {background-position：-16px -128px; }
.ui-icon-plusthick {background-position：-32px -128px; }
.ui-icon-minus {background-position：-48px -128px; }
.ui-icon-minusthick {background-position：-64px -128px; }
.ui-icon-close {background-position：-80px -128px; }
.ui-icon-closethick {background-position：-96px -128px; }
.ui-icon-key {background-position：-112px -128px; }
.ui-icon-lightbulb {background-position：-128px -128px; }
.ui-icon-scissors {background-position：-144px -128px; }
.ui-icon-clipboard {background-position：-160px -128px; }
.ui-icon-copy {background-position：-176px -128px; }
.ui-icon-contact {background-position：-192px -128px; }
.ui-icon-image {background-position：-208px -128px; }
.ui-icon-video {background-position：-224px -128px; }
.ui-icon-script {background-position：-240px -128px; }
.ui-icon-alert {background-position：0 -144px; }
.ui-icon-info {background-position：-16px -144px; }
.ui-icon-notice {background-position：-32px -144px; }
.ui-icon-help {background-position：-48px -144px; }
.ui-icon-check {background-position：-64px -144px; }
.ui-icon-bullet {background-position：-80px -144px; }
.ui-icon-radio-off {background-position：-96px -144px; }
.ui-icon-radio-on {background-position：-112px -144px; }
.ui-icon-pin-w {background-position：-128px -144px; }
.ui-icon-pin-s {background-position：-144px -144px; }
.ui-icon-play {background-position：0 -160px; }
.ui-icon-pause {background-position：-16px -160px; }
.ui-icon-seek-next {background-position：-32px -160px; }
.ui-icon-seek-prev {background-position：-48px -160px; }
.ui-icon-seek-end {background-position：-64px -160px; }
.ui-icon-seek-start {background-position：-80px -160px; }
/ * ui-icon-seek-first被弃用，使用ui-icon-seek-start代替* /
.ui-icon-seek-first {background-position：-80px -160px; }
.ui-icon-stop {background-position：-96px -160px; }
.ui-icon-eject {background-position：-112px -160px; }
.ui-icon-volume-off {background-position：-128px -160px; }
.ui-icon-volume-on {background-position：-144px -160px; }
.ui-icon-power {background-position：0 -176px; }
.ui-icon-signal-diag {background-position：-16px -176px; }
.ui-icon-signal {background-position：-32px -176px; }
.ui-icon-battery-0 {background-position：-48px -176px; }
.ui-icon-battery-1 {background-position：-64px -176px; }
.ui-icon-battery-2 {background-position：-80px -176px; }
.ui-icon-battery-3 {background-position：-96px -176px; }
.ui-icon-circle-plus {background-position：0 -192px; }
.ui-icon-circle-minus {background-position：-16px -192px; }
.ui-icon-circle-close {background-position：-32px -192px; }
.ui-icon-circle-triangle-e {background-position：-48px -192px; }
.ui-icon-circle-triangle-s {background-position：-64px -192px; }
.ui-icon-circle-triangle-w {background-position：-80px -192px; }
.ui-icon-circle-triangle-n {background-position：-96px -192px; }
.ui-icon-circle-arrow-e {background-position：-112px -192px; }
.ui-icon-circle-arrow-s {background-position：-128px -192px; }
.ui-icon-circle-arrow-w {background-position：-144px -192px; }
.ui-icon-circle-arrow-n {background-position：-160px -192px; }
.ui-icon-circle-zoomin {background-position：-176px -192px; }
.ui-icon-circle-zoomout {background-position：-192px -192px; }
.ui-icon-circle-check {background-position：-208px -192px; }
.ui-icon-circlesmall-plus {background-position：0 -208px; }
.ui-icon-circlesmall-minus {background-position：-16px -208px; }
.ui-icon-circlesmall-close {background-position：-32px -208px; }
.ui-icon-squaresmall-plus {background-position：-48px -208px; }
.ui-icon-squaresmall-minus {background-position：-64px -208px; }
.ui-icon-squaresmall-close {background-position：-80px -208px; }
.ui-icon-grip-dotted-vertical {background-position：0 -224px; }
.ui-icon-grip-dotted-horizontal {background-position：-16px -224px; }
.ui-icon-grip-solid-vertical {background-position：-32px -224px; }
.ui-icon-grip-solid-horizontal {background-position：-48px -224px; }
.ui-icon-gripsmall-diagonal-se {background-position：-64px -224px; }
.ui-icon-grip-diagonal-se {background-position：-80px -224px; }
/ *混合视觉
----------------------------- ----- * /
/ *角半径* /
.ui-corner-tl {-moz-border-radius-topleft：6px; -webkit-border-top-left-radius：6px; border-top-left-radius：6px; }
.ui-corner-tr {-moz-border-radius-topright：6px; -webkit-border-top-right-radius：6px; border-top-right-radius：6px; }
.ui-corner-bl {-moz-border-radius-bottomleft：6px; -webkit-border-bottom-left-radius：6px; border-bottom-left-radius：6px; }
.ui-corner-br {-moz-border-radius-bottomright：6px; -webkit-border-bottom-right-radius：6px; border-bottom-right-radius：6px; }
.ui-corner-top {-moz-border-radius-topleft：6px; -webkit-border-top-left-radius：6px; border-top-left-radius：6px; -moz-border-radius-topright：6px; -webkit-border-top-right-radius：6px; border-top-right-radius：6px; }
.ui-corner-bottom {-moz-border-radius-bottomleft：6px; -webkit-border-bottom-left-radius：6px; border-bottom-left-radius：6px; -moz-border-radius-bottomright：6px; -webkit-border-bottom-right-radius：6px; border-bottom-right-radius：6px; }
.ui-corner-right {-moz-border-radius-topright：6px; -webkit-border-top-right-radius：6px; border-top-right-radius：6px; -moz-border-radius-bottomright：6px; -webkit-border-bottom-right-radius：6px; border-bottom-right-radius：6px; }
.ui-corner-left {-moz-border-radius-topleft：6px; -webkit-border-top-left-radius：6px; border-top-left-radius：6px; -moz-border-radius-bottomleft：6px; -webkit-border-bottom-left-radius：6px; border-bottom-left-radius：6px; }
.ui-corner-all {-moz-border-radius：6px; -webkit-border-radius：6px; border-radius：6px;
/ *覆盖* /
.ui-widget-overlay {background：#eeeeee url（images / ui-bg_diagonals-thick_90_eeeeee_40x40.png）50％50％重复;不透明度：.80;过滤器：Alpha（Opacity = 80）; }
.ui-widget-shadow {margin：-7px 0 0 -7px; padding：7px;背景：＃000000 url（images / ui-bg_highlight-hard_70_000000_1x100.png）50％top repeat-x;不透明度：.30;过滤器：Alpha（Opacity = 30）; -moz-border-radius：8px; -webkit-border-radius：8px; border-radius：8px;
public class FileUploader extends HttpServlet {
protected void doPost（HttpServletRequest request，HttpServletResponse response）throws ServletException，IOException
{
try {
ArrayList< Object> items =（ArrayList< Object>）new ServletFileUpload（new DiskFileItemFactory（））。parseRequest（request）;
FileItem curntFile = null; （int iCount = 0; iCount< items.size（）; iCount ++）{
curntFile =（FileItem）items.get（iCount）;
dir = dir + curntFile.getName（）;
OutputStream out = new FileOutputStream（new File（dir））;
InputStream inputStream = curntFile.getInputStream（）;
int read = 0;
byte [] bytes = new byte [1024];
while（（read = inputStream.read（bytes））！= -1）{
out.write（bytes，0，read）;
}
inputStream.close（）;
out.flush（）;
out.close（）;
uploadedFilesResult = curntFile.getName（）;
}
} catch（FileUploadException e）{
throw new ServletException（解析文件上传失败，e）;
}
response.getWriter（）。print（uploadedFilesResult）;
}
}
< servlet>
< servlet-name> DataEntry< / servlet-name>
< servlet-class> com.tcs.Webframework.ehf.action.FileUploader< / servlet-class>
< / servlet>
< servlet-mapping>
< servlet-name> DataEntry< / servlet-name>
< url-pattern> / dataentry< / url-pattern>
< / servlet-mapping>
Could you help me please?
I would like to know how to support my website by adding a drag and drop feature using JavaScript. If anyone has useful references or examples; because I am totally blind in this area.
Thank you :)
The things that I have to do drag and drop could be a div or predifined object.
解决方案
Here is the simple code for dragging a/many files from your desktop to a web page and uploading on drop of the file.
Please note that it includes HTML5 options and so IE9 and lower doesn't support this.
$(document).ready(function() {
var dropbox = document.getElementById("dropbox")
// init event handlers
dropbox.addEventListener("dragenter", dragEnter, false);
dropbox.addEventListener("dragexit", dragExit, false);
dropbox.addEventListener("dragover", dragOver, false);
dropbox.addEventListener("drop", drop, false);
// init the widgets
$("#progressbar").progressbar();
});
function dragEnter(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragExit(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var count = files.length;
// Only call the handler if 1 or more files was dropped.
if (count > 0)
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
document.getElementById("droplabel").innerHTML = "Processing " + file.name;
// var sampleText = document.getElementById("sampleText").value;
// var sampleFile = document.getElementById("sampleFile").files[0];
var formdata = new FormData();
formdata.append("sampleText", "ppppppp");
formdata.append("sampleFile", file);
var xhr = new XMLHttpRequest();
xhr.open("POST","/EHF/dataentry?", true);
xhr.send(formdata);
xhr.onload = function(e) {
if (this.status == 200) {
alert(this.responseText);
}
};
var reader = new FileReader();
// init the reader event handlers
reader.onprogress = handleReaderProgress;
reader.onloadend = handleReaderLoadEnd;
// begin the read operation
reader.readAsDataURL(file);
}
function handleReaderProgress(evt) {
if (evt.lengthComputable) {
var loaded = (evt.loaded / evt.total);
$("#progressbar").progressbar({ value: loaded * 100 });
}
}
function handleReaderLoadEnd(evt) {
$("#progressbar").progressbar({ value: 100 });
var img = document.getElementById("preview");
img.src = evt.target.result;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="dndimg.css">
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.1.custom.css">
<script src="http://www.google.com/jsapi?key=ABQIAAAADYbHHQrNWPElNtE4hn2g1hQhn5tTlmnhbGVHENfXgw8ik0kvARSWpfuAdtdt1KqinQpUokxB7SpcsQ"
type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="draganddrop.js"></script>
</head>
<body>
<div id="dropbox"><span id="droplabel">Drop file here...</span>
<div id="progressbar"></div>
</div>
<br/>
<img id="preview" src="" alt="[ preview will display here ]"/>
</body>
</html>
#dropbox {
width: 425px;
height: 300px;
border: 2px solid #DDD;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color: #FEFFEC;
text-align: center;
color: #BBB;
font-size: 2em;
font-family: Arial, sans-serif;
}
#progressbar {
margin-left: 20px;
margin-right: 20px;
position: relative;
top: 75%;
}
#droplabel {
position: relative;
top: 40%;
}
/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*
* jQuery UI CSS Framework
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Lucida%20Grande,%20Lucida%20Sans,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=deedf7&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=100&borderColorHeader=aed0ea&fcHeader=222222&iconColorHeader=72a7cf&bgColorContent=f2f5f7&bgTextureContent=04_highlight_hard.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=362b36&iconColorContent=72a7cf&bgColorDefault=d7ebf9&bgTextureDefault=02_glass.png&bgImgOpacityDefault=80&borderColorDefault=aed0ea&fcDefault=2779aa&iconColorDefault=3d80b3&bgColorHover=e4f1fb&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=74b2e2&fcHover=0070a3&iconColorHover=2694e8&bgColorActive=3baae3&bgTextureActive=02_glass.png&bgImgOpacityActive=50&borderColorActive=2694e8&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=ffef8f&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=25&borderColorHighlight=f9dd34&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=cd0a0a&bgTextureError=01_flat.png&bgImgOpacityError=15&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffffff&bgColorOverlay=eeeeee&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=90&opacityOverlay=80&bgColorShadow=000000&bgTextureShadow=04_highlight_hard.png&bgImgOpacityShadow=70&opacityShadow=30&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px
*/
/* Component containers
----------------------------------*/
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #f2f5f7 url(images/ui-bg_highlight-hard_100_f2f5f7_1x100.png) 50% top repeat-x; color: #362b36; }
.ui-widget-content a { color: #362b36; }
.ui-widget-header { border: 1px solid #aed0ea; background: #deedf7 url(images/ui-bg_highlight-soft_100_deedf7_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #aed0ea; background: #d7ebf9 url(images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #2779aa; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #2779aa; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #74b2e2; background: #e4f1fb url(images/ui-bg_glass_100_e4f1fb_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #0070a3; }
.ui-state-hover a, .ui-state-hover a:hover { color: #0070a3; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #2694e8; background: #3baae3 url(images/ui-bg_glass_50_3baae3_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; }
.ui-widget :active { outline: none; }
/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #f9dd34; background: #ffef8f url(images/ui-bg_highlight-soft_25_ffef8f_1x100.png) 50% top repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #cd0a0a url(images/ui-bg_flat_15_cd0a0a_40x100.png) 50% 50% repeat-x; color: #ffffff; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_72a7cf_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_72a7cf_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_72a7cf_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_3d80b3_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_2694e8_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; }
.ui-corner-tr { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
.ui-corner-br { -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-corner-top { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-corner-right { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; border-top-right-radius: 6px; -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }
.ui-corner-left { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }
.ui-corner-all { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
/* Overlays */
.ui-widget-overlay { background: #eeeeee url(images/ui-bg_diagonals-thick_90_eeeeee_40x40.png) 50% 50% repeat; opacity: .80;filter:Alpha(Opacity=80); }
.ui-widget-shadow { margin: -7px 0 0 -7px; padding: 7px; background: #000000 url(images/ui-bg_highlight-hard_70_000000_1x100.png) 50% top repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
public class FileUploader extends HttpServlet {
protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException
{
try {
ArrayList<Object> items = (ArrayList<Object>) new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
FileItem curntFile=null;
for(int iCount=0;iCount<items.size();iCount++){
curntFile= (FileItem)items.get(iCount);
dir = dir+curntFile.getName();
OutputStream out = new FileOutputStream(new File ( dir ));
InputStream inputStream = curntFile.getInputStream();
int read = 0;
byte[] bytes = new byte[1024];
while ((read = inputStream.read(bytes)) != -1) {
out.write(bytes, 0, read);
}
inputStream.close();
out.flush();
out.close();
uploadedFilesResult=curntFile.getName();
}
} catch (FileUploadException e) {
throw new ServletException("Parsing file upload failed.", e);
}
response.getWriter().print(uploadedFilesResult);
}
}
<servlet>
<servlet-name>DataEntry</servlet-name>
<servlet-class>com.tcs.Webframework.ehf.action.FileUploader</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DataEntry</servlet-name>
<url-pattern>/dataentry</url-pattern>
</servlet-mapping>
这篇关于在javascript中拖放功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
