ajax调用ajax图片提交

来源：蜘蛛抓取(WebSpider) 时间：2018-04-20 12:54 标签： ajax图片提交

手头上有几个小项目用到了easyUI一開始决定使用easyUI就注定了项目整体上前后端分离，基本上所有的请求都采用Ajax来完成在文件上传的时候用到了Ajax上传文件，以及ajax图片提交在上傳之前的预览效果解决了这两个小问题，和小伙伴们分享下

先来说说ajax图片提交上传之前的预览问题。这里主要采用了HTML5中的FileReader对象来实现关于FileReader对象，如果小伙伴们不了解可以查看这篇文章。我们来看看实现方式：

这里对于支持FileReader的浏览器直接使用FileReader来实现不支持FileReader的浏览器則采用微软的滤镜来实现（注意给ajax图片提交上传的input标签设置onchange函数）。

除了这种方式之外我们也可以采用网上现成的一个jQuery实现的方式这里主要参考了这里。

不过由于原文年代久远里边使用的$.browser.msie从jQuery1.9就被移除掉了，所以如果我们想使用这个得做一点额外的处理我修改后的uploadPreview.js文件內容如下：

然后在我们的html文件中引入这个js文件即可：

这里有如下几点需要注意：

2.预先定义好要显示预览ajax图片提交的img标签，该标签要有id

Ajax上傳ajax图片提交文件就简单了，没有那么多方案核心代码如下：

核心就是定义一个FormData对象，将要上传的数据包装到这个对象中去然后在ajax上传數据的时候设置data属性就为formdata，processData属性设置为false表示jquery不要去处理发送的数据，然后设置contentType属性的值为false表示不要设置请求头的contentType属性。OK主要就是设置这三个，设置成功之后其他的处理就和常规的ajax用法一致了。

后台的处理代码大家可以在文末的案例中下载这里我就不展示不出来了。

以上所述是小编给大家介绍的Ajax上传ajax图片提交及上传前先预览功能实例代码希望对大家有所帮助，如果大家有任何疑问请给我留言小編会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

规定请求的类型、URL 以及是否异步處理请求

  • url：文件在服务器上的位置

与 POST 相比，GET 更简单也更快并且在大部分情况下都能用。

然而在以下情况中，请使用 POST 请求：

  • 无法使用緩存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时POST 比 GET 更稳定也更可靠

一个简单的 GET 请求：


在上面的例子中，您可能得到的是缓存的结果

为了避免这种情况，请向 URL 添加一个唯一的 ID：


如果您希望通过 GET 方法发送信息请向 URL 添加信息：



一个简单 POST 请求：



向请求添加 HTTP 头。

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

该文件可以是任何类型的文件比如 .txt 和 .xml，或者服务器脚本文件比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）

对于 web 开发人员来说，发送异步请求是一个巨大嘚进步很多在服务器执行的任务都相当费时。AJAX 出现之前这可能会引起应用程序挂起或停止。

通过 AJAXJavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

我们不推荐使用 async=false但是对于一些小型的请求，也是可以的

请记住，JavaScript 会等到垺务器响应就绪才继续执行如果服务器繁忙或缓慢，应用程序会挂起或停止


我要回帖

更多关于 ajax图片提交 的文章

 

随机推荐