使用缩略图进行PHP多图像上传并拖放

时间:2016-03-21 12:02:08

标签: php jquery ajax drag-and-drop image-uploading

我想通过拖放功能实现多个图片上传,但无法在线查找任何内容以帮助解决我的具体案例。

问题是我想在上传时将图片大小调整为16:9比例,并在上传时显示缩略图。此外,我正在使用一个标签,我写了一些CSS来设置它作为一个很好的上传按钮,我触发一个带有该标签的隐藏文件上传输入。

<label for="image">Upload image</label>
<input type="file" name="images[]" id="image">

我想我需要在每个&#34;上传图片&#34;上使用jquery ajax。按钮单击以将图像发送到上传脚本,其中我调整图像大小,上传(他们)到服务器并返回图像路径到jquery作为响应,以便我可以显示已调整大小的图像的缩略图( S)。拖放功能同样如此,我倾听&#39; drop&#39;并将删除的图像发送到上传脚本。

到目前为止,我可以毫无问题地开始工作,但问题是我不想将图像实际上传到服务器,直到用户点击按钮提交表单一旦他完成所有内容输入。所以我的问题是我可以用这种方式操作图像而不是上传到服务器将它们存储在本地的某个地方,直到点击最终提交按钮为止?

我想到了一个解决方案,我将图像上传到&#34; temp&#34;我的服务器上的文件夹使用ajax然后在表单上提交移动到&#34; images&#34;文件夹,然后设置cron每天清空一次该文件夹,但我想避免这种情况,因为用户可以开始填写表单,上传一些图像,然后在他点击表单之前提交cron步骤并删除所有&#34; temp&#34;中的图像文件夹和他的图像都丢失了。

1 个答案:

答案 0 :(得分:0)

每次选择文件时(文件输入更改),我都会通过jquery创建一个新的文件输入,从所有以前的文件输入中删除id并设置id =&#34; image&#34;对于我创建的那个新的,为了使它在贴上标签时仍能正常工作。

要显示预览缩略图,我使用FileReader并将上传的图像设置为缩略图div的背景,我设置为16:9比例(padding-bottom:56.25%)。一旦提交表单,将在服务器上进行实际图像裁剪。