首页
学习
活动
专区
工具
TVP
发布

图片上传并回显Ajax异步篇

图片如何无刷新的上传到服务器呢?继前两篇文章后,我们来实战一下如何无刷新的异步上传图片,我们还是先看一下效果

在实战前呢,我们需要做些准备工作。比如说,了解一下FormData对象

“FormData对象用以将数据编译成键值对,以便用来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。如果表单属性设为multipart/form-data,则会使用表单的方法来发送数据,从而,发送数据具有同样形式。”

这是官方的讲解,我来说一下我的理解,我们new一个FormData( $(form) )对象时,它会帮我们把form表单里的数据封装成键值对的形式,以前我们都时用input的submit进行提交数据,当我们拿到这个form对象的时候,我们就可以用ajax模拟input的submit提交,既然知道了这些,我们就开始一步步的编程吧。

我们先完善一下界面,看一下下面的代码

formid="formTag1"enctype="multipart/form-data">

divclass="uploadImgBtn"id="uploadImgBtn">

inputclass="uploadImg"type="file"name="file"id="file1">

div>

form>

这是css里的内容

style>

.uploadImgBtn{

width:100px;

height:100px;

cursor:pointer;

position:relative;

background:url("img/plus.png")no-repeat;

-webkit-background-size:cover;

background-size:cover;

}

.uploadImgBtn.uploadImg{

position:absolute;

right:;

top:;

width:100%;

height:100%;

opacity:;

cursor:pointer;

}

.pic{

width:100px;

height:100px;

}

.picimg{

width:100%;

height:100%;

}

style>

基本的样式都已经编写完成,我们来参观一下吧

好了,我们开始编写我们的jquery代码吧,在编写之前我们理一下思路,当用户选择好图片时,即input 的change事件触发时,我们就把图片上传到服务器,服务端返回图片的url,我们拿到这个url时,把它设置为我们input外面盒子的背景图。既然知道了思路我们就编写一下代码吧

我们把change事件的执行函数独立出来,因为我们可能还需要用到这个函数。函数也没有什么难点,就是保存一个this对象,加一个ajax。我们来看一下效果图

我们已经实现了change事件触发时,我们把图片上传到服务器,我们也可以改变我们已经选择好的图片,到这里肯定还没有结束。因为用户只是选择了一张图片,如果我们的业务需要用户上传多张图片呢,那我们这个肯定就不满足要求了,我们需要再给我们的代码添加一些功能。比如说,当用户选择好一张后,再生成一个form->input标签,然后就这样递归;但我们还需要加一些条件,就是当用户改变已经选择好的图片时,我们不能生成form->input标签。好了需求大概就是这样的。

我们来理一下思路:

1、我们需要给form标签外面添加一个盒子,我们把所有生成的form标签都放里面。

2、我们需要有一个计数器,记录form的个数,也是通过这个我们可以给form和input设置不同的id

3、我们需要判断当前change事件是第几个,如果它的id中的数值部分和count一样,我们就新生成一个form,否则就返回

我们先看一下我们的html部分

我们来编码实现一下js部分

这样的话我们基本就实现了我们的效果,就如开头中的效果,这个是可以无限添加form的,到时候可以给count设置一个上界,根据自己的业务来调整吧,到此我们的图片上传并回显系列就算完结了;

听说520快到了,我们是不是需要new一个会说话的对象呢,520的时候我们就来实战new一个对象吧,也是作为一个礼物送给大家呢(手动滑稽)

图片上传并回显系列

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180517G1VCFM00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券