Ajax上传图片

tinyq 发布于2019-08-02 12:08 / 3068人阅读

摘要：上传图片的类型是如下图当我们选择图片文件时如下判断是否为空如下为空不为空上传到后台之前要先加一个把它包起来，并添加点击按钮上传如下点击上传然后是部分通过上传创建一个把添加进去命名为成功失败就这么简单，后台接收即可

上传图片input的类型是file （如下图）

当我们选择图片文件时如下：

判断是否为空如下：

if($("#pic_img").val() == ""){
    //为空
}else{
    //不为空
}

上传到后台之前要先加一个form把它包起来，并添加点击按钮上传如下：

然后是js部分通过ajax上传

function upload(){
    var formData = new FormData($("#uploadForm")[0])  //创建一个forData 
    formData.append("img", $("#pic_img")[0].files[0]) //把file添加进去  name命名为img
    $.ajax({
        url: /api/v1/xxxx,
        data: formData,
        type: "POST",
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
             //成功
        },
        error: function() {
              //失败
        }
      })
}

OK就这么简单，后台接收 name=img即可

idc机房托管专线服务 ajax上传图片 ajax上传文件 ajax文件上传 ajax上传进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53367.html

移动端上传图片（ajax跨域请求）

摘要：项目开发简述项目需求上传图片并展示。做是为了给后台传值。上传截图点击更换提交数据判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。优点确实提高上传速度。缺点后台查看提交的图片，模糊不清晰。第一次写项目开发经验，望担待。除了前端以外的事就不叨叨了，下面开始弄干活（两个页面首页、列表页）。项目开发简述项目需求：上传图片并展示。项目地址：项目的链接地址开发工具：su...

frontoldman 2019-08-29 11:10 评论0 收藏0
移动端上传图片（ajax跨域请求）

摘要：项目开发简述项目需求上传图片并展示。做是为了给后台传值。上传截图点击更换提交数据判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。优点确实提高上传速度。缺点后台查看提交的图片，模糊不清晰。第一次写项目开发经验，望担待。除了前端以外的事就不叨叨了，下面开始弄干活（两个页面首页、列表页）。项目开发简述项目需求：上传图片并展示。项目地址：项目的链接地址开发工具：su...

seanHai 2019-08-05 10:04 评论0 收藏0
移动端上传图片（ajax跨域请求）

摘要：项目开发简述项目需求上传图片并展示。做是为了给后台传值。上传截图点击更换提交数据判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。优点确实提高上传速度。缺点后台查看提交的图片，模糊不清晰。第一次写项目开发经验，望担待。除了前端以外的事就不叨叨了，下面开始弄干活（两个页面首页、列表页）。项目开发简述项目需求：上传图片并展示。项目地址：项目的链接地址开发工具：su...

Donald 2019-08-20 10:24 评论0 收藏0
thinkPHP利用ajax异步上传图片并显示、删除

摘要：近来学习的过程中，项目中有个发帖功能，选择主题图片。如下利用原始的文件上传处理，虽然通过原始语句能实时显示上传图片，但是这样的话会涉及很多兼容问题。使用技术，实现选择性删除所选图片功能，并不会有兼容问题。近来学习tp5的过程中，项目中有个发帖功能，选择主题图片。如下： showImg(https://segmentfault.com/img/bVbhraB?w=799&h=321);...

LucasTwilight 2019-07-01 10:45 评论0 收藏0
vuejs使用FormData，ajax上传图片文件

摘要：我相信很多使用的朋友，都有采用上传图片的需求，因为前后端分离后，我们希望都能用来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用能够无刷新上传图片等文件。我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了...

zollero 2019-08-20 18:34 评论0 收藏0
nodejs express图片上传前后端配置讲解

摘要：默认地，表单数据会编码为。就是说，在发送到服务器之前，所有字符都会进行编码空格转换为加号，特殊符号转换为值。提交说明文件上传。图片选择图片地址上传上传。用表单直接构造对象就不需要下面的方法来为表单进行赋值了。 nodejs图片上传 nodejs一般开发网站基本都用express框架，本文也主要以express为例，讲解如何上传图片；express本身没有上传图片功能；一般都是集成相应的...

tuniutech 2019-08-19 18:30 评论0 收藏0