求助,FileUpload如何设置CSS-CSDN论坛

html-css044

求助,FileUpload如何设置CSS-CSDN论坛,第1张

无法直接赋值...

但可以转用其它方法...

例如:

放置一个文本框,放置一个FileUpload,然后将Width设置为0...

看看成了什么...没错,文本框 一个"浏览"按钮的形态~

接下来重点的解决就是选择了文件后给文本框赋值

在Page_Load里注册这个

this.fu.Attributes.Add("onchange", "document.getElementById('" txt.ClientID "').value = this.value")

好了,点击看看FileUpload选择文件后看看,文本框的值是不是就是你选择文件的值...

我也是碰到这个问题,换了不同思路以不同方式在网上找了3个多小时,然后总结出网上的各种使用<input type="tetx">和<input type="file">的替换方法尝试后总结出来的...

比起使用HTML控件,我这个方法算是比较好的吧,一方面可以查询数据库给文本框赋值,另一方面可以直接使用FileUpload的SaveAS方法保存文件...这两方面都比使用HTML控件好用多了,虽然唯一的缺点是..."浏览"按钮前面的那个小小的竖线...

iview-Upload组件官网链接: https://iview.github.io/components/upload

效果展示

css

.out-box{

width: 100%

border: 1px solid #e6e6e6

border-radius: 8px

padding: 20px 20px 10px

}

.img-border{

border: 1px solid #e6e6e6

border-radius: 8px

margin-right: 20px

width:100px

height:100px

}

.upload-box{

width: 100px

height:100px

display: inline-block

}

.upload-inner-box{

width: 100px

height: 100px

font-size: 40px

text-align: center

background: #F5F5F5

}

.upload-tip{

color:red

}

template

<div class="out-box">

<img class="img-border" v-if="seeView" :src="this.imageUrl"  />

<Upload ref="uploadFiles"

:show-upload-list="false"

:max-size="5120"

:on-success="handleSuccess"

:on-exceeded-size="handleMaxSize"

:before-upload="beforeUploadImg"

:loading="true"

type="drag"

:format="['jpg','jpeg','png','gif']"

:on-format-error="handleFormatError"

action="url"

class="upload-box">

                <div class="upload-inner-box">

                <div style="padding-top: 20px">+</div>

                <div style="font-size: 12px">请上传图片</div>

</div>

</Upload>

<div class="upload-tip">图片大小勿超5M,尺寸为{{minWidth}}*{{minHeight}},勿小于该尺寸,且尽量以该长宽比制图以保证页面效果</div>

</div>

data

seeView:"false",//是否展示已上传的图片

imageUrl:"",//上传图片的url

url:"",//上传的地址

minWidth:number,//最小宽度

minHeight:number,//最小高度

methods

//上传成功

    handleSuccess(response, file, fileList) {

      this.imageUrl = response.result

      this.seeView = true

    },

    //上传的文件大小超出要求

    handleMaxSize() {

      this.$Modal.warning({

        title: "提示",

        content: "上传缩略图大小不能超过5M!!!",

      })

    },

    //上传文件格式不符合要求

    handleFormatError() {

      this.$Modal.warning({

        title: "提示",

        content: "上传缩略图格式错误!!!",

      })

    },

    //上传前对图片宽高的检验

    beforeUploadImg(file) {

      this.checkImageWidth(file, minWidth).then((checkWidth) =>{

        if (checkWidth) {

          this.checkImageHeight(file, minHeight).then((checkHeight) =>{

            if (checkHeight) {

              this.$refs.uploadFiles.post(file)

            }

          })

        }

      })

      return false

    },

    // 异步方法 检验图片宽度

    async checkImageWidth(file, widthCheck) {

      let width = await this.getImageWidth(file)

      let checkWidth = width >widthCheck || width == widthCheck

      if (!checkWidth) {

        this.$Notice.warning({

          title: "图片宽度错误",

          desc:

            file.name +

            " 的宽度为" +

            width +

            "px, 请上传宽度大于" +

            widthCheck +

            "px的图片. ",

        })

      }

      return checkWidth

    },

    // 获取图片宽度

    getImageWidth(file) {

      return new Promise((resolve) =>{

        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = function () {

          if (reader.readyState == 2) {

            const img = new Image()

            img.src = reader.result

            img.onload = function () {

              resolve(this.width)

            }

          }

        }

      })

    },

    // 异步方法 检验图片高度

    async checkImageHeight(file, heightCheck) {

      let height = await this.getImageHeight(file)

      let checkHeight = height >heightCheck || height == heightCheck

      if (!checkHeight) {

        this.$Notice.warning({

          title: "图片高度错误",

          desc:

            file.name +

            " 的高度为" +

            height +

            "px, 请上传高度大于" +

            heightCheck +

            "px的图片. ",

        })

      }

      return checkHeight

    },

    // 获取图片宽度

    getImageHeight(file) {

      return new Promise((resolve) =>{

        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = function () {

          if (reader.readyState == 2) {

            const img = new Image()

            img.src = reader.result

            img.onload = function () {

              resolve(this.height)

            }

          }

        }

      })

    },