JQuery :: Php - Drag And Drop Files - How To Get File Info
Nov 12, 2009
Interested in building my own drag'n'drop file uploader using JQuery/AJAX/PHP. Basically I want a file-uploader that users of my site can just drag the file from their computer into a div I created, and it will then upload the file for them to the selected destination.
I would like to build this from scratch, and not use any plugins so that I can better manipulate the restrictions (file types, size, destination folders, etc.)Have scoured google with no luck, only plugins. Can anyway steer me in the right direction?
UPDATEI: how to do what I want. Just set the file input field opacity to 1 so it is hidden, and you can still drag a file into that general area and if you hit the text field it will catch it. HOWEVER, I would like to know how to increase the height/width on the file input field (tried basic css on the file, but it only increases the 'browse' button size and not the actual field where you can drop the file into. I basically want a big square div that says 'Drop file here'. So I need to resize the input field.
View 19 Replies
ADVERTISEMENT
Apr 15, 2004
The Windows common controls include a VBDataObject interface that can be utilized during drag|drop events (as an argument). Retrieving the path of files dropped onto a control is as simple as checking the format of the Data Object for vbCFFIles (constant = 15), and if true, enumerating the Files collection (1-based) for each item (which returns the full path as a string).
The Animation Control is simplest one I've found for demonstrating this:
Some information about that control is here...
(http://msdn.microsoft.com/library/devprods/vs6/vbasic/vbcon98/vbconusinganimationcontrol.htm)
<html>
<head>
<title>IVBDataObject Demo</title>
<style type="text/css">
fieldset{
text-align:center;
padding:2em
}
object{
width:3em;height:3em;
border:6px double activecaption;
vertical-align:middle
}
textarea{
width:60%;margin-top:1em;
word-wrap:normal;
vertical-align:middle
}
</style>
</head>
<body>
<fieldset>
<legend><strong>Drop File(s) » </strong>
<object id="IAnimation"
classid="clsid:B09DE715-87C1-11D1-8BE3-0000F8754DA1">
<param name="OleDropMode" value="1">
</object>
</legend>
<label><em>output: </em></label>
<textarea id="output" cols="100" rows="10"></textarea>
</fieldset>
<script type="text/JScript">
function IAnimation::OLEDragDrop(Data){
if(Data.GetFormat(15)){
var O = "";
var e = new Enumerator(Data.Files);
while(!e.atEnd()){
O += e.item() + "
";
e.moveNext();
}
output.value = O;
BackColor=0x80000003;}
}
// Just for visual feedback...
function IAnimation::OLEDragOver(Data, _, _, _, _, _, State){
if (State == 0){
if(Data.GetFormat(15)){Backcolor = 0x80000002;}
}
if(State == 1){Backcolor = 0x80000003;}
}
function window::onload(){
IAnimation.BackColor=0x80000003;
}
</script>
</body>
</html>
Probably most useful in HTAs, when scripting the FileSystem or Shell objects...
View 12 Replies
View Related
Jul 23, 2005
Is there a way to make it possible for an <input type=file> form element to accept a drag-and-drop file or will the browser window always accept the file?
View 1 Replies
View Related
May 5, 2010
Im having the exact same problem as posted here:[URL]
When I drag my link to my droppable area, an ajax request is supposed to triggred, but it seems like the whole page is beeing reloaded. This works fine with Chrome and Firefox. It works in IE if I have insert an alert in the drop function.
Im including the drop code I have:
$('.droppable').droppable({
drop: function(ev, ui) {
var intSourceObjectType = ui.draggable.attr('objecttype');
var intSourceObjectId = ui.draggable.attr('objectid');
[Code]....
View 1 Replies
View Related
Dec 7, 2007
Please the link to see what I have done so far...[URL]... It is a day planner, where various places can be dragged on to the day planner. It works, but it seems very slow. Running firebug profile when dragging a simle place into a single slot tells me that over 35,000 calls were made.
View 7 Replies
View Related
Jun 11, 2009
I've got a page that uses the draggable and droppable feature - [URL]
It also uses jQuery to call a web service via Ajax - this also works fine.
However, I want to call the web service only when an item is dropped onto the objeect but when I try to add the Ajax function inside the $("#droppable").droppable({ drop: function(event, ui) {.... it doesn't seem to work.
You can see my code at [URL]
View 1 Replies
View Related
Aug 12, 2009
I am using jQuery Tabs to make an ajax call for each tab when clicked. The ajax that displays is like inettuts. 3 or 4 columns of widgets that can be dragged and dropped. The problem that I am having, when I put the html of the result directly in the main page, it works as designed. When I click on a tab, it displays the page, but all the jquery functions in that ajax page are gone and I cannot sort, drag and drop anything. I suspect that the ajax page is not reading the javascripts in the head, which are on main page. Unfortunately I can't remove them to include them in ajax pages dynamically because I am also using them for other functions in main page. Is there a way to make those ajax pages read the javascripts on that main page?
[URL]
View 3 Replies
View Related
Oct 29, 2009
I found fantastic drag and drop technique, analyzied javascript file and would like to get helo, how to create it. Here: [URL] you can drag and drop the photos to the right box, then you can email them. How can I create it on my own website? You can find javascript file here: [URL]. Is it possible at all?
View 2 Replies
View Related
Jan 10, 2011
I'm finally getting around to try the drag and drop functionality of jquery. I am working with the Shopping Cart example. Everything is working great but I would like to add a remove link to the dropped item so it can be deleted from the shopping cart.
Needless to say I haven't even gotten to the code to actually remove the link cause I can't even append the link...haha
This results in nothing: $('<a href="#">remove</a>').after(ui.item);
This results in duplicate entry of the dragged element with the bullet point: $('<a href="#">remove</a>').after.ui.item;
View 5 Replies
View Related
Sep 2, 2010
I am trying to use jquery drag and drop in cfwindow it does not work when i place code out side cfwindow it works nicely, how can i resolve this issue, i tried usinf cfajaxonload but no luck.
View 3 Replies
View Related
May 13, 2011
I am working on a project where I need to drag an image from a ASP.NET datalist control that is bound to a datatable to a repeater control that is bound to a datatable. The issue I am having is I need to know the Id (field bound to the datalist) of the row of the dragged image. Is there a way to access this field when the image is dropped? I would also need to know the id of the row in the repeater that the image is dropped on.Here is the code that I currently have:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SRCartPg2.aspx.cs" Inherits="HRI.Proof"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >[code]............
View 1 Replies
View Related
Apr 9, 2011
I am attempting to build a page, however using some sample code the page have drag and drop functionality.
After using a simple jqeury statement to add to this form, every thing working (drag and drop)properly.
Now my actual requirement is
I need to generate the controls dynamically. Whne I generated all controls from server side and put all the generated controls HTML snipet in
<
div
id
="sort1"
class
="groupWrapper">
its working fine but when I try to put same HTML snippet in the same DIV using JavaScript drag and drop functionality not working;
Below is the code I am using.
Case when drag and drop functionality Not working.
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
[Code].....
View 2 Replies
View Related
Aug 17, 2009
<a href="http://jqueryui.com/demos/sortable/#connect-lists">http://jqueryui.com/demos/sortable/#connect-lists</a>
I was wondering if anyone knew of code like this that handled embedded lists that would work like an Outline
View 1 Replies
View Related
Apr 24, 2009
I'm looking to order a list taht is created by drag and drop.
The structure is a normal unordered list
Have looked at sort , sortable , etc...But no real explanation found.
View 3 Replies
View Related
Feb 11, 2010
I'm looking to find out a way to drag and drop table rows between two tables. I reused jQuery example for portlets, but that did not work to full satisfaction. In above screen shot I added border, but that is just for illustration of the issue. Problems:As you will see from the code I have to work with relative measurement there for I use percentage. I wasn't able to enforce row width to fill in whole table. How do I force full row width?
Drag-able row are part of table body (tbody) and headers are done with thead. In this scenario I enforced same style settings on header as body and everything is now squashed to the left. If I leave styling out of header then first header stretches over whole tdody content and second is out of place over nothing. Sort of bad designed table when you forget one column. This become a big issue if there is more then 2 items in a row, for example 4 column in tbody get squashed under one thead column even though there are 4 headers to align under it.
[Code]...
View 1 Replies
View Related
Feb 16, 2010
I have a problem with the drag and drop function. I would like to drag a div and when I drop it I want a copy of the div to append to the area and I want to be able to do the same process over and over again. Example: [URL]. I want my div to behave the same way but without the "sortable" function, instead I want to put the div wherever I want. I have tried to do just that for several days, without success.
View 1 Replies
View Related
Aug 5, 2011
Im working on some drag and drop logic similar to the jQuery shopping cart example, but I've run into a small hitch. If I double click on the LI within my 'dropped' area it causes them to become draggable again. I specifically set up drag to only work from one source list, so Im unsure how double clicking is causing this bug?
View 1 Replies
View Related
Jun 14, 2011
How to disable drag and drop to/from an input text?
View 1 Replies
View Related
May 6, 2011
IE7 & IE8 refuse to run this code that must reposition a crosshairs over a street map. The crosshairs can be dragged and dropped only once. The second time I attempt to drag the crosshairs, nothing moves but this message appears: "object doesn't support this property or method" on the sentence posx = pos.left; By the way, the class crosshairs has position:relative.
var stepAlongTheWay = 1;
$(document).ready(function() {
$("#crosshairs").draggable({containment: "parent"});
$("#map").droppable({
drop: function(event,ui) {
mainProcess(ui); .....
You can check it out at [URL]
View 3 Replies
View Related
May 27, 2009
Any plugin/website that is jQuery, which will do what this Dojo example does, i.e: [URL]. I am wanting something similar to this as I would like to use as a means of allowing a user to administer a menu structure.
View 1 Replies
View Related
Dec 30, 2011
Im working on jquery drag and drop inv scripts for my web based game but i need help about item limitation.I want to limit number of items in inventory.How can i do this?
im using these files atm :
[URL]...
View 3 Replies
View Related
Dec 27, 2011
I am playing with an idea I found, here is a demo, And while I like it's function, I would like to make a couple mods. 1) How do I remove an item from the built/filled image list
View 1 Replies
View Related
Feb 23, 2010
I need to write an extensive online circuit design website with lots of drag/drop.
What is the best JavaScript framework for drag/drop specifically?
View 1 Replies
View Related
Feb 20, 2011
So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). why it is happening and how to fix it!
// JavaScript Document
var posX;
var posY;
var element;
[Code]....
the html is a simple (position is set to relative):
<p id="square" onmousedown="drag(event)">meep</p>
EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library.
View 1 Replies
View Related
Jun 21, 2010
I've never worked with Ajax before but I've been reading up on it and done some basic tutorials and am comfortable with the concept of asynchronous communication and how everything works from a technical communication perspective. That being said I have no idea where to start on this project which seems like it should be fairly simple. 1. the browser will have a "working area" which is a rectangle of some decent size, there will be a toolbar of objects on the left hand side. This work area should be shown as a grid that the objects will be placed into.The size of this grid (basically the gridlines) will need to be generated automatically based on user input (also the size of the components/objects that will be dragged in and the size of the rectangle) if it is too large (say 500) i'd like a way to pan around and zoom in as well... 2. For simplicity say there are 2 components: Available, unavailable and an erase feature. 3. each object when dragged to the working area should create an object that has some properties (handled programatically from input elsewhere on a simple form) I will be placing these in a database server side. 4. I'd like to be able to drag across the grid to continuously add the selected object and I'd like to be able to click a button on the edge of the grid to fill in the entire row with the objects. From everything I've read on this it seems like this should be somewhat easy but again I don't know what framework to use to start. I'll be putting this in a drupal site and integrating it with a few modules if that makes a difference (i think that part of the programming will be separate from whatever specific implementation I use to get this Ajax part up though)
View 1 Replies
View Related
Jun 5, 2009
Just wanna show of our portal system based on DotNetNuke <span class="il">jQuery</span> and jQueryUI We took the sortable example and modified it with up down movement animation slide into place smooth animation drag to delete and click to delete restore functionality
[Code]...
View 1 Replies
View Related
