linyows/hoge

## hoge
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>

<title>Socket.io File Upload Example</title>

<link rel=stylesheet href="/css/upload.css" media=all>

<script src="/socket.io/socket.io.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="/js/upload.js"></script>


</head>
<body>

<h2>Upload</h2>

<div id="upload">
<input type="file" id="fileupload" multiple="true">
</div>

<p id="info">
Drag one or more file to the blue square to upload them.<br>
Or click the square to select multiple files to upload.
</p>

<h2>Uploaded files</h2>

<div id="uploaded"></div>

</body>
</html>
--------------------
#upload {
width: 400px;
height: 400px;
background-color: #00e;
cursor: pointer;
}

#upload.drop {
background-color: #0e0;
}

#fileupload {
position: relative;
top: 0;
left: 0;
width: 400px;
height: 400px;
opacity: 0;
background-color: red;
}
--------------------
$(document).ready(function() {
  var socket = io.connect();

  socket.on('connect', function() {
    console.log('connected');
  });


  socket.on('message', function(data) {
    $('#uploaded').append($('<div><a href="/'+data+'" target="_blank">'+data+'</a></div>'));
  });


  if ($.browser.msie || $.browser.opera) {
    $(document.body).text('Your browser does not support Drag & Drop uploading.');
    return;
  }


  function handleDrag(e) {
    if (e.type == 'dragenter') {
      $('#upload').addClass('drop');
    } else if ((e.type == 'dragleave') || (e.type == 'drop')) {
      $('#upload').removeClass('drop');
    }

    e.stopPropagation();
    e.preventDefault();
  }


  function handleUploads(files) {
    for (var i = 0; i < files.length; ++i) {
      var reader = new FileReader();

      reader.onloadend = function(d) {
        socket.send(d.target.result, function(err) {
          if (!err) {
            console.log('file uploaded');
          }
        });
      };

      reader.readAsDataURL(files[i]);
    }
  }


  // Add the drag handlers to both the upload area and th fileupload area.
  // Adding it to the fileupload area is needed because it is on top of the upload area in Chrome.
  $('#upload, #fileupload').bind('dragenter', handleDrag).bind('dragleave', handleDrag).bind('dragover', handleDrag);

  $('#upload').get(0).ondrop = function(e) {
    handleDrag(e);

    if (!e.dataTransfer.files) {
      alert('Dropping files is not supported by your browser.');
      return;
    }

    var files = e.dataTransfer.files;

    handleUploads(files);
  };

  $('#fileupload').change(function(e) {
    handleUploads(this.files);
  }).click(function(e) {
     // Since this element is placed inside the #upload element this click will bubble though to it and we will have infinite recursion.
     // So prevent this by stopping the bubbling.
     e.stopPropagation();
  });

  if ($.browser.mozilla) {
    $('#upload').click(function() {
      $('#fileupload').click();
    });

    $('#fileupload').css('display', 'none');
  }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>

	<title>Socket.io File Upload Example</title>

	<link rel=stylesheet href="/css/upload.css" media=all>

	<script src="/socket.io/socket.io.js"></script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
	<script src="/js/upload.js"></script>


	</head>
	<body>

	<h2>Upload</h2>

	<div id="upload">
	<input type="file" id="fileupload" multiple="true">
	</div>

	<p id="info">
	Drag one or more file to the blue square to upload them.<br>
	Or click the square to select multiple files to upload.
	</p>

	<h2>Uploaded files</h2>

	<div id="uploaded"></div>

	</body>
	</html>
	--------------------
	#upload {
	width: 400px;
	height: 400px;
	background-color: #00e;
	cursor: pointer;
	}

	#upload.drop {
	background-color: #0e0;
	}

	#fileupload {
	position: relative;
	top: 0;
	left: 0;
	width: 400px;
	height: 400px;
	opacity: 0;
	background-color: red;
	}
	--------------------
	$(document).ready(function() {
	var socket = io.connect();

	socket.on('connect', function() {
	console.log('connected');
	});


	socket.on('message', function(data) {
	$('#uploaded').append($('<div><a href="/'+data+'" target="_blank">'+data+'</a></div>'));
	});


	if ($.browser.msie \|\| $.browser.opera) {
	$(document.body).text('Your browser does not support Drag & Drop uploading.');
	return;
	}


	function handleDrag(e) {
	if (e.type == 'dragenter') {
	$('#upload').addClass('drop');
	} else if ((e.type == 'dragleave') \|\| (e.type == 'drop')) {
	$('#upload').removeClass('drop');
	}

	e.stopPropagation();
	e.preventDefault();
	}


	function handleUploads(files) {
	for (var i = 0; i < files.length; ++i) {
	var reader = new FileReader();

	reader.onloadend = function(d) {
	socket.send(d.target.result, function(err) {
	if (!err) {
	console.log('file uploaded');
	}
	});
	};

	reader.readAsDataURL(files[i]);
	}
	}


	// Add the drag handlers to both the upload area and th fileupload area.
	// Adding it to the fileupload area is needed because it is on top of the upload area in Chrome.
	$('#upload, #fileupload').bind('dragenter', handleDrag).bind('dragleave', handleDrag).bind('dragover', handleDrag);

	$('#upload').get(0).ondrop = function(e) {
	handleDrag(e);

	if (!e.dataTransfer.files) {
	alert('Dropping files is not supported by your browser.');
	return;
	}

	var files = e.dataTransfer.files;

	handleUploads(files);
	};

	$('#fileupload').change(function(e) {
	handleUploads(this.files);
	}).click(function(e) {
	// Since this element is placed inside the #upload element this click will bubble though to it and we will have infinite recursion.
	// So prevent this by stopping the bubbling.
	e.stopPropagation();
	});

	if ($.browser.mozilla) {
	$('#upload').click(function() {
	$('#fileupload').click();
	});

	$('#fileupload').css('display', 'none');
	}
	});