如何在同一页面浏览和显示图像？

我有一个很小的疑问。我有一个html标签来浏览文件。并且当我从本地服务器浏览文件时，我想将该路径设置为图像标签的来源。有可能实现吗？如何在同一页面浏览和显示图像？

我已经编写了类似这样的代码。

<form name="image" id="image" enctype="multipart/form-data" action="" method="post"> 

    <input type="file" name="img" /> 
    <img src=""></img> 

</file>

所以只要我浏览并选择从本地服务器上的文件，该路径应设置为图像tag.My目的是浏览图片，并在页面本身显示出来。任何帮助将不胜感激。提前致谢。

来源

2012-05-16 Shashi Roy

什么是“本地服务器”？ – jimpic

感谢您的快速回复。我运行在wamp上。 –

浏览器现在允许您从输入[type = file]标签中访问文件的路径，以获得长的时间。你不能像你想要的那样简单地做。为了完成用户选择文件后显示文件的目标，您实际上需要将其上传到服务器。这通常需要页面刷新，但是有很多JavaScript库可用，以便在不刷新页面的情况下实现。文件上传后，您可以“ping通”URL来查看图像，并将其加载到图像标签中。

我一直在使用最近要做行内文件上传的jQuery库是jQuery File Upload

来源

2012-05-16 11:15:44

但我不想在操纵它之前将它发送到服务器。我正在努力工作Jcrop。但是在那个例子中，他们在我们加载页面的那一刻就获取了图像。请检查链接。并感谢您的快速回复。检查链接后，请再次回复我。 http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop –

他们也使用预定义的图像，而不是用户选择/上传的图像。您必须将它们保存在服务器上，然后将它们加载回页面，然后调用jcrop并执行操作。 –

你需要做的是在客户端的文件的完整路径 - 这是不允许的（见this thread）。

对不起，但没有发送文件到服务器，除了获取文件名（不是路径），文件类型和文件大小外，您无法对它做任何事情。

来源

2012-05-16 11:30:35

我的意图是浏览并设置url为图片标签，因为我需要为JCrop图片库实现它。在他们的例子中，他们已经直接采取了路径，当他们加载页面时，图像被加载。任何解决方案请参阅网页的链接和源代码。你会立即得到我的问题。请帮助我。提前致谢。这是链接deepliquid.com/projects/Jcrop/demos.php?demo=live_crop –

我看到的是一个简单的裁剪功能：显示服务器上的图像 - 一些隐藏的输入，其中包含要裁剪的坐标，以及在提交时裁剪图像的php脚本。如果你想使用客户端的文件，你首先必须将其上传到服务器，否则你无法做任何事情 - 这是一个安全功能。 –

oh ok ...所以，当你建议把它上传到服务器上然后裁剪它时，如果用户在服务器上上传它，并且不裁剪它，那么我们将在服务器上不必要地增加一个额外的文件。什么是解决方案？ –

如何在同一页面浏览和显示图像？

回答

相关问题