1
Hier ist meine Haupt-HTML-Datei;Wenn ich Bilddateien aus einem Ordner hochlade, kann ich sie nicht ziehbar machen
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel = "stylesheet"
type = "text/css"
href = "jquery-ui-1.11.4.custom/jquery-ui.css " />
<style type = "text/css">
.dragMe {
width: auto;
height: auto;
/* border: 1px solid blue; */
text-align: center;
background-color: white;
position: absolute;
display:inline-block;
z-index: 100;
}
.dragMeImage {
width: 180px;
height: 55px;
border: 1px solid blue;
text-align: center;
background-color: white;
position: absolute;
z-index: 100;
}
#target {
width: 400px;
height: 600px;
border: 1px solid red;
text-align: center;
position: absolute;
left: 400px;
top: 100px;
z-index: 0;
}
</style>
<script type = "text/javascript"
src = "jquery-1.12.4.min.js">
</script>
<script type = "text/javascript"
src = "jquery-ui-1.11.4.custom/jquery-ui.min.js">
</script>
<script type = "text/javascript" src="ajaxshow.js">
</script>
<script type = "text/javascript">
$(init);
function init(){
//make all drag me elements draggable
$(".dragMe").draggable();
$(".dragMeImage").resizable({
//aspectRatio: 3.2
});
//set target as droppable
$("#target").droppable();
//bind events to target
$("#target").bind("drop", changeTarget);
$("#target").bind("dropout", resetTarget);
} // end init
function changeTarget(event, ui){
$("#target").addClass("ui-state-highlight")
.html("Dropped ")
.append(ui.draggable.text());
} // end changeTarget
function resetTarget(event, ui){
$("#target").removeClass("ui-state-highlight")
.html("Drop on me");
} // end reset
</script>
</head>
<body id="page2">
<form id=form enctype="multipart/form-data" method="post" action="show_images.php">
<input type="submit" value="Continue"/>
</form>
<div id="preview"></div>
<div id="err"></div>
<!-- <h2>Create an Invitation Template to be Sent to the List Owners</h2>
<div class = "dragMe">
<img class = "dragMeImage" src="garbo.png" alt="Garbo Logo" style="width:180px;height:120px;">
</div>
<div class = "dragMe">
<img class = "dragMeImage" src="CA.png" alt="Garbo Logo" style="width:180px;height:55px;">
</div>
<div class = "dragMe">
<img class = "dragMeImage" src="CA1.png" alt="Garbo Logo" style="width:180px;height:55px;">
</div>
<div id = "target">
Drop on this template
</div> -->
</body>
</html>
Hier ist ajaxshow.js;
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "http://localhost/phpexamples/show_images.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
//$("#preview").fadeOut();
$("#err").fadeOut();
},
success: function(data)
{
if(data=='invalid file')
{
// invalid file format.
$("#err").html("Invalid File !").fadeIn();
}
else
{
// view uploaded file.
$("#preview").html(data).fadeIn();
$("#form")[0].reset();
}
},
error: function(e)
{
$("#err").html(e).fadeIn();
}
});
}));
});
und hier ist die PHP-Datei;
Wenn ich die Bilder in statischem HTML (auskommentiert) laden, funktioniert es gut. Wenn ich den obigen Code ausführe, lädt er das erste Bild im Verzeichnis, aber es ist nicht ziehbar oder in der Größe veränderbar. Wenn ich die Klassen-IDs aus dem Echo-Teil der PHP-Datei nehme. Es lädt die Bilder in Ordnung, aber natürlich sind sie nicht ziehbar oder in der Größe veränderbar. Kann jemand helfen. Danke vielmals. Neil.
Sie wissen nicht, aber man konnte die Seite und prüfen Sie den erzeugten Code der Suche nach irgendwelchen Differenzen untersuchen. – FirstOne
Rufen Sie jemals die Funktion init() auf? –
@SpencerRohan Die erste Zeile: '$ (init);' ruft init() als Callback auf, sobald die Seite geladen ist. Dies könnte auch geschrieben werden: '$ (document) .ready (init);' Also ja, sein Code ruft 'init()' auf. – Twisty