Question

在表单中，有一个文件字段

<input type="file" name="file">
<input type="button" value="upload">

我想将图片文件上传到服务器上，但我无法上传图片。只有javascript有什么解决方案吗？请帮我找到这个答案。谢谢..！

Answer 1

单独使用JavaScript是不可能的，您需要使用服务器端语言来处理文件的实际上传。

Answer 2

这将在Firefox中完成，IE不支持FormData，所以你应该找到另一种方式

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<form id="data">
  <fieldset>
    <div>Asset File: <input id="image_file" name="image_file[]" type="file" /></div>
    <div><input type="submit" value="Submit"></div>
  </fieldset>
</form>


<script>
$(function() {

  $("form#data").submit(function(event){

    event.preventDefault();

    var url  = 'http://server.com/upload';
    var image_file = $('#image_file').get(0).files[0];

    var formData = new FormData();
    formData.append("image_file", image_file);

    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function (status) {
        // do something on success
      }
    });

    return false;

  });

});

</script>

enter image description here

Answer 3

您的网站文件存储在服务器上。 JavaScript在客户端运行。

图像必须存放在某处。但是客户端JavaScript可以访问用户的浏览器窗口（或选项卡）。和用户的缓存。您不能仅使用客户端JavaScript在服务器存储中写入文件。

上传和下载图片的方式：

下载：
您使用JavaScript（例如ajax）向服务器发送请求。在此请求中，您说：“GET http://my-site/images/cool-dog.png”这是尝试从服务器上的公共文件夹访问images/cool-dog.png的静态请求。每个服务器都有一个选项，允许您确定哪个文件夹将包含静态请求的所有文件。

STATIC 请求是指您尝试访问具有扩展名（cool-dog.png）的文件

上传：
众所周知，每个人都可以在控制台上编写客户端JavaScript：每个主流浏览器都有调试工具。每个人都可以通过Postman向您的服务器发送任何类型的请求接受所有请求是不好的。有人可能想以最高速度上传100GB文件。这可能会影响应用程序和服务器性能甚至破坏应用程序。

您需要服务器端逻辑来确定哪个文件适合您的服务器以及此文件必须存储在何处，因为JavaScript只知道客户端存储（cookies，localStorage，sessionStorage，缓存等等）

上传过程是：
您将客户端JavaScript的请求发送到服务器端。例如：POST http://my-site/uploadImage包含图像数据服务器端接受该请求。例如：Router.get('uploadImage', function() {...Server side code...})。由于http://my-site/uploadImage是动态路径（我们没有扩展名）服务器端路由器将等待此类请求，如果请求，服务器端代码必须检查文件大小和扩展名（.png或.dll）等等...如果文件适合您的应用程序，那么您可以将此文件写入服务器位置。

不同的服务器语言和技术有不同的处理请求和编写文件的方法。

如果您想扩展您的知识，您需要学习至少一种服务器端语言和技术。您不能仅使用客户端逻辑来创建灵活的应用程序。

如果您还熟悉JavaScript。您可能想学习NodeJS。 This site包含NodeJS初学者的精彩教程。

如果你能找到一些好的教程，PHP也很容易学习。

Here是如何使用nodeJS上传文件的教程而here是PHP的另一个

如何仅使用javascript和ajax上传图像文件

3 个答案: