问题：

当我从文件夹上传图像文件时，我不能使它们可拖动

洪富

2023-03-14

这是我的主要html文件；

<!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>

这里是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();
      }          
    });
 }));
});

这里是PHP文件；

<?php
$folder = "uploads/";
if(is_dir($folder)){
    if($handle = opendir($folder)){
        while(($file=readdir($handle)) != false){
            if($file==='.' || $file==='..') continue;
            list($width, $height) = getimagesize("uploads/$file");
                $h=150/$width*$height;
                $aspect = $height / $width; 
                    if ($aspect >= 1) $mode = "vertical"; 
                    else $mode = "horizontal";  
                echo  '<div class = "dragMe">';
                echo  '<img  class = "dragMeImage" src="uploads/'.$file.'" width="150" height="$h" alt="">';
                echo  '</div>';
        }
        closedir($handle);
    }
}
?>

当我用静态超文本标记语言加载图像时（注释掉），它工作正常。当我运行上面的代码时，它会加载目录中的第一个图像，但它不可拖动或调整大小。当我从PHP文件的回声部分取出类ID时。它可以加载图像，但当然它们是不可拖动或调整大小的。有人能帮忙吗。非常感谢。尼尔。

共有1个答案

朱欣荣

2023-03-14

由于您是在图像上传后动态添加内容，因此您需要在新元素上调用. draggable（）。

我建议在AJAX完成后执行此操作：

$.ajax({
  url: "http://localhost/phpexamples/show_images.php",
  type: "POST",
  data:  new FormData(this),
  contentType: false,
  cache: false,
  processData:false,
  beforeSend : function() {
    $("#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();
      $("#preview").find(".dragMe").draggable();
    }
  },
  error: function(e) {
    $("#err").html(e).fadeIn();
  }          
});

类似资料：

您好，我想使用php_move_upload_文件将图像从临时文件夹移动到永久文件夹

hi这是一个上传临时位置内的图像并将位置保存到会话以供使用的功能这里是导致问题的函数我想将图片从临时文件夹移动到永久位置，但php_move_uploaded_file（）在我的情况下不起作用我真的不知道什么是问题请帮助我，如果你知道什么是问题thnks. 我没有收到任何错误，我已经调试了很多次，但没有警告，没有任何错误，文件夹的位置完全正确，也没有权限问题。 move_uploaded_fil
ionic 3不使用文件、文件传输、文件上传插件从相机上传图像

我想使用FormData将图像上传到我的后端，但由于Ionic DEVAPP和Ionic VIEW不支持文件、文件传输和文件上传插件，我只需要使用Angular Http或HttpClient即可。当使用DestinationType.FILE_URI时，我可以从文件中获取内部url并将其显示在img对象上，但如果没有本机文件、文件路径和文件传输插件，我无法从该url创建打字脚本文件对象。 }
我不能用graphql-java上传文件

我尝试用java GraphQL上传文件。我研究了这个主题的解决方案：如何用GraphQL-Java上传文件？我使用的是graphql-java版本11.0、graphql-spring-boot-starter版本5.0.2、graphql-java-kickstart版本7.5.0。我做错了什么？
为什么在Spring中我不能将上传的文件保存在资源/图像文件夹中？

这是一个使用ajax调用的spring项目。我想把上传的图像保存在resources/images文件夹中。以下是我的控制器：文件被上传并显示在index.jsp中。但它不存储在资源/图像文件夹中。下面是我的index.jsp 模型是：它显示了一个错误：对于路径为[/SimpleAjaxJQueryPicUpload]的上下文中的servlet[dispatcher]的servlet.Se
无法使用servlet上传图像文件夹中的图像

我可以上传图片在数据库，但不能上传到“文件”文件夹。万维网这是图像上传servlet。一旦图像被上传，它就应该被插入到files文件夹中。我不知道我犯了什么错误。谁能告诉我出了什么问题吗？我需要添加上传目录或文件路径C：inside吗？
我们可以通过打开下载文件夹吗。意图

实际上，我需要从我的应用程序中打开默认的下载文件夹。可以吗？如果可以，请提供一些参考。我可以在以下帮助下获取下载文件夹的路径：任何帮助都将不胜感激。

当我从文件夹上传图像文件时，我不能使它们可拖动

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档