图片多次上传

1.功能

2.遍历标签,添加元素

            <div 
                class="mb15 clearfix"
                v-for="(item, index) in addnormals"
                :key="index"
                >
                  <img :src="item.logoUrl" alt="" class="left ml10 icon_img">
                  <a href="javascript:;"  class="file left">预览
                    <input type="file" @change="fileimg(index)" :data="item.activityCode" accept="image/gif, image/jpeg, image/png, image/jpg" name="img" class="inputfil">
                  </a>
                <Button  type="primary" class="left ml10" style="margin-top:3px" v-if="index==0" @click="addnormal" >+</Button>
                <Button  type="primary" class="left ml10" style="margin-top:3px" v-if="index!=0" @click="addnorma2(index)">-</Button>               
              </div> 

3.参数的定义

     addnormals: [
        {
          logoUrl:require('../../image/moren.png')
        }
      ]

4.按钮+的函数

addnormal () {
      this.index2++
      this.addnormals.push({
        logoUrl:require('../../image/moren.png')
      })
    },

// data 中定义index2:1

5.按钮-的函数

addnorma2 (index) {
      this.addnormals.splice(index, 1)
    },

// splice 定义和用法
// splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

// 语法
// arrayObject.splice(index,howmany,item1,.....,itemX)


// 参数	描述
// index	必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// howmany	必需。要删除的项目数量。如果设置为 0,则不会删除项目。
// item1, ..., itemX	可选。向数组添加的新项目。

// 返回值
// 类型	描述
// Array	包含被删除项目的新数组,如果有的话。


// 说明
// splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换
// 那些被删除的元素。

// 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

6. 文件上传的函数

// 上传图片
    fileimg (index) {
      console.log(document.querySelectorAll('.inputfil')[index].files[0])
      if (document.querySelectorAll('.inputfil')[index].files[0].type == '') {
        this.addnormals[index].activityCode = ''
        this.addnormals[index].logoUrl = require('../../image/moren.png')
        this.$Modal.warning({
          title: '温馨提示',
          content: '请上传正确格式的图片'
        });
        return false
      }
      let formData = new FormData();
      this.addnormals[index].activityCode = '1'
      // document.querySelectorAll('.inputfil')[index].setAttribute('data','1')
      formData.append('file', document.querySelectorAll('.inputfil')[index].files[0])
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        timeout:1000*60*5
      }
    this.http.post(BASE_URL + '/fileUpload', formData, config)
    .then((resp) => {
      if (resp.code == 'success') {
        this.addnormals[index].logoUrl = resp.data

      } else {
      }
    })
    .catch(() => {
    })
    }

7. 大功告成

主要用了Uploadify插件,还有AJAX。 兼容各种主流浏览器:chrome Firefox IE ... IE7以上都兼容,IE6没试过。 因为Uploadify是用flash做的,所以如果浏览器上面看不到"上传"按钮,请先检查你的flash是否已安装。 压缩包里包含两个项目,一个是多图上传的示例(不含数据库),另一个也是多图上传的示例,不过这个可以修改每张图片的描述,所以用了SQL数据库。 项目中UploadHandler.ashx里面有等比例生成缩略图和裁剪图片的方法,如有需要可直接调用。 第一个项目和第二个项目都主要用Jquery AJAX Uploadify来完成上传图片的功能。很简单的代码,不会复杂。如果不认识这三个东西的,建议百度或谷歌一下。 第二个项目用了linq to sql进行对SQL数据库的操作,包括上传图片时对数据库进行插入数据的操作,删除图片时对数据库进行删除的操作,设置"封面图片"时对数据库的操作。 这个我是用ASP.NET建的项目,如果你是其他平台的也可以参考里面某些代码,如Uploadify上传,Jquery对图片列表的操作。 其他的具体看项目,代码片段: PicUpload.js : //删除图片 function deletePic(n) { $.ajax({ type: "GET", url: "/api/UploadHandler.ashx?action=deletePic", data: "picName=" + n + "&ver=" + new Date().getTime(), dataType: "html", success: function (data) { if (data.length > 10) { $("li[id='p_" + n.replace(".jpg", "") + "']").remove(); } } }) } UploadHandler.ashx : //删除图片 public bool DeletePic(string pName) { string uploadPath = HttpContext.Current.Server.MapPath("~/Upload/" + pName); if (System.IO.File.Exists(uploadPath)) { System.IO.File.Delete(uploadPath); Album query = (from item in db.Album where item.Pname == pName select item).First(); db.Album.DeleteOnSubmit(query); db.SubmitChanges(); return true; } else return false; } 最后简单说下Uploadify,Uploadify的介绍网上都很多,也有很多的示例。我就说说功能,看下面的代码: $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': '/js/jquery.uploadify-v2.1.0/uploadify.swf', 'script': '/api/UploadHandler.ashx', 'cancelImg': '/js/jquery.uploadify-v2.1.0/cancel.png', 'folder': '/Upload', 'queueID': 'fileQueue', 'auto': true, 'multi': true, 'fileDesc': '请选择.jpg .png .bmp .jpeg文件', 'fileExt': '*.jpg;*.png;*.bmp;*.jpeg;', 'onComplete': function (e, queueId, fileObj, data) { $("#photoListUl").append(data); $("#progressText2").hide(); document.getElementById('photoListUl').scrollTop = "99999"; }, 'onSelect': function (e, queueId, fileObj) { $("#progressText1").text(iSum++); $("#progressText2").show(); } }); }); function uploadFile() { jQuery('#uploadify').uploadifyUpload() } 可以限定选择上传的文件类型,我这里是上传图片. 可以限定要上传的文件的大小,如限定为15M? 可以在上传的时候添加参数或各种验证. 这些你在网上可以找到很多例子的,我在项目里就不添加上去了。 ----------------------------------------------------------------- 项目仅供参考。如有疑问可直接回复或企鹅: 514158268
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值