通过ajax将图像上传到webserver，并将给定的文件名插入数据库

Question

我目前正在开展一个需要以下项目。

• 我需要能够上传图像（进一步的范围是多个 图像）
• 到网络服务器的某个区域，将上传图片的名称重命名为 我想要的是什么（即我说的具体字符串 _1 _2上的增量用于多个图像e.t.c）
• 通过ajax完成，因为我不希望页面重新加载。
• 将返回的文件名添加到数据库中。

我之前使用php完成了图片上传，但是使用rand生成一个名称并通过post返回，但不是通过ajax，我已经单独完成了上面的所有内容，但并不是所有的内容......

我已经做了一个快速的谷歌搜索，但似乎没有一个像我想要的那样工作。

我喜欢这个http://www.zurb.com/playground/ajax_upload的工作，但我不能让我的生活得到它。

谢谢：）

Answer 1

我可以给你一个概念而不是实际的代码，我没有任何问题地完成了这个

1. 创建文件上传表单。
2. 在页面上创建一个iFrame（隐藏，高度宽度为1px），因此它在页面上不可见
3. 将上传表单目标设置为该框架，因此当您提交数据时，它将在iframe中加载页面
4. 创建您自己的上传文件接收脚本，它将具有会话和其他变量
5. 文件wihch将接收图像，将存储并更新数据库
6. 在你上传表单的页面上，向iframe添加一个脚本onPageLoad的东西，所以当iFrame获取内容时它会触发JS，通过这个JS，你可以调用另一个ajax调用来获取上传的图像并在你的上面显示页。

如果你是jQuery专家，你可以用这个概念创建自己的插件。

如果您有疑问，请告诉我

Answer 2

据我所知，仅使用AJAX上传是不可能的。但是，有一些解决方法。您可以使用普通文件上传（有关详细信息，请参阅http://www.php.net/manual/en/features.file-upload.php）。然后，您的浏览器将尝试显示您刚刚执行的POST响应。因此，您需要将表单的框架目标指向一个新的不可见iframe，这样您的页面内容就不会发生变化。您可以使用POST的响应将新的javascript代码发送到浏览器，例如可以为用户显示一些反馈或显示刚刚上传的图像。原型库（http://www.prototypejs.org/）将帮助您完成其中的一些任务。

上面的链接还会提供有关如何重命名文件，将其存储在Web服务器上，甚至将其存储在数据库中的提示。不推荐使用后一种方法。