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

frontoldman 发布于2019-08-29 11:10 / 1060人阅读

摘要：项目开发简述项目需求上传图片并展示。做是为了给后台传值。上传截图点击更换提交数据判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。优点确实提高上传速度。缺点后台查看提交的图片，模糊不清晰。

第一次写项目开发经验，望担待。
除了前端以外的事就不叨叨了，下面开始弄干活（两个页面首页、列表页）。

项目 开发简述

项目需求：上传图片并展示。
项目地址：项目的链接地址
开发工具：sublime
后台：java
开发语言：JavaScript（jq）
项目运用到的技术：css3+html5+jquery+ajax jsonp

html部分

重点说一下这两个地方：

做了一个li，里面放一个span用来做数字标题，再用border-radius做圆角，写一个宽度，要定死宽和高，在用字体居中和浮动向左，就OK了；

重点说一下上传图片这个地址，因为需求，领导不喜欢原生的上传图片按钮，需要放自己做的上传按钮，我在最外头套了一个label里面放了input和图片。做input是为了给后台传值。


    上传截图
    
        
            
        
        
            "
        +""+"");
    });
    $(".zheng").css("opacity","0");
    $(".zheng").attr("title","点击更换");
    $(".zhengImg").css("display","none");
    $(".loading,#mask").show();
    ajax1();
});

4、提交数据
判断需要填写的参数是否为空，如果不为空直接往下走，直到成功提交数据。

心得

在做这个项目的时候，最头疼的地方，应该就是传输图片了，因为如果过大的图片变成64编码，会数据量巨大，传输过慢，我的处理方式是在上传的时候先把图片进行压缩，压缩的不是尺寸，是分辨率。
优点：确实提高上传速度。
缺点：后台查看提交的图片，模糊不清晰。

更好的方法我也没有想到，希望大家可以一起探讨。

云服务器 GPU云服务器 H5移动端上传图片 ajax请求跨域问题 js ajax跨域请求数据 jquery_ajax跨域请求

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

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

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

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

Donald 2019-08-20 10:24 评论0 收藏0
WEB之常见工作问题总结（1-20）

摘要：第三种，使用格式，即在中请求参数处理跨域问题当然请求方式只能是。最后发现有网友说版本不稳定引起的，于是把百度地图回退到了，结果还真是可以了。请问在移动端页面中播放优酷里面的视频，怎样实现 1.web扫码登录怎么实现，思路步骤 WEB平台手机第1步生成二维码第2步（ajax监控后台）扫码第3步 ...

genedna 2019-08-22 13:40 评论0 收藏0
基于Node的React图片上传组件实现

摘要：常用的设置如下下的请求风格下的请求和不太一样，在正式的请求发出之前都会先发一个类型为的请求作为试探，只有当该请求通过以后，正式的请求才能发向服务端。所以服务端路由我们还需要处理这样一个请求注意该请求同样需要设置跨域。写在前面红旗不倒，誓把JavaScript进行到底！今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理（React + Node），花了一些时间，希望对...

cfanr 2019-08-20 10:14 评论0 收藏0