0

我相信我可以简化我以前的项目点击这里！构建一个上传预览器，以便编辑器可以在上传到服务器之前使用它来查看他放置的内容。（只是一个简单的预览器，无需使用 php 脚本加载或保存到数据库）。

我使用相同的简短 Ajax 和 html 表单脚本并稍微修改了 jquery 选择器。现在我可以看到文本输入了。每次我插入新单词时，文本区域都会准确显示我所做的。但是，图像部分似乎误入歧途。我尝试使用图像选择器（attr“src”）来获取路径，并希望它可以获取照片并显示在我构建的标签中。但是，我只能将值作为路径根，例如 (C:/images/img1.png) 在整个图片中。以下是提到问题的脚本：

<script language="JavaScript">
$(document).ready(function() {
       $("form").keyup( function() {
          var qtyVal = $('.qty').val();
          var contentVal = $('.content').val();
          var imageVal = $('input:file').val();
      // get 
        $.ajax({
        type: 'POST',
        url:  'result1.php',
        data: { qty : qtyVal,
                content : contentVal,
                image : imageVal,
                 }, 

        success: function(data) {
           // get XML value
           $('#result').html($(data).find('total').text()); 
           $('#result1').html($(data).find('content').text()); 

               //I bleieved something goes wrong with the following script!

           $('#test').attr("src").html($(data).find('upload').text());  

        } 
      });    
      return false;
   });
    });

</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#news").hide();
  $("#flip").click(function(){

    $("#news").slideToggle("slow");

  });
});
</script> 

</head>
<body>
<a href="#"><div id="flip">previewer</div></a>
<div id="news" class="news">
<form method="post" enctype="multipart/form-data">
<table cellspacing="4" cellpadding="2">
<tr><th>title</th><th>content</th></tr>

<tr>
<td>
<div id="result2" class="box" style="width:300px; height:350px;">
//image block where I want to show the image by creating an imge tag>
<img src="#" class="test" /></div></td>
<td><div id="result" class="box" style="height:100px;"></div>
   <div id="result1" class="box" style="height:250px; overflow:hidden;"></div>
</td></tr>
</div>

  <td bgcolor="#CCCCCC"><input type="text" class="qty" name="qty" ></td>
  <td bgcolor="#CCCCCC"><textarea type="text" class="content" name="content" ></textarea></td>
  <td><input type="file" class="image" name="image"/></td>

  <td bgcolor="#CCCCCC"><input type="submit" name="btnUpdate" value="update" />
      <input type="submit" name="btnDelete" value="delete" />
      </td>
</tr><br />

<tr><td colspan="5" align="center">div></td></tr>
</form>
</table>

我还将我的简短 php 脚本作为上述 Ajax 的 XML 文件包含在内：

<?php
// XML

header("Content-Type:text/html; charset=utf-8");

// GET the text and image values 

$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
$content = (isset($_POST["content"]) ) ? $_POST["content"] : $_GET["content"];
$image = (isset($_POST["image"]) ) ? $_POST["image"] : $_GET["image"];

echo "<?xml version=\"1.0\" ?>";

echo "<caculation>"; 

echo "<total>" . "$qty" . "</total>";

 // right now I can get the path back to the html page.
echo "<upload>"."$image"."</upload>";
echo "<content>"."$content"."</content>";
 echo "</caculation>";

    ?>

据我了解，SO 专家已经构建了功能强大且专业的多功能 Ajax 预览器。但是，作为一个初学者和学习者，我对我的菜鸟和落后的剧本还是很满意的。希望有人可以帮助解决错误。欢迎任何可能的建议或建议！

4

1 回答 1

0

如果您使用的是 attr('src') 那么它将只返回路径。如果您想要整个图像，则将响应设置为服务器中的图像以获得获取请求，或使用 base64 字符串图像并使用数据 uri 方案来显示图像

于 2013-08-12T06:40:04.097 回答