项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件吧.加之上传视频就是用的webuploader,所以上传图片也理所当然选它了.

插件初始化,js引用什么的,官方文档上都写的比较清楚,建议直接去官方api去看

http://fex.baidu.com/webuploader/getting-started.html#图片上传

        官方api上值给出了上传单个图片文件的demo,但实际项目开发中,图片上传都是裹挟在表单中的,也就是说不仅要上传图片文件,还需要上传一些输入框的值.如果因此去调多次后台接口,显得麻烦了.

<div id="imgPicker"></div>

<Img src="https://www.cnblogs.com/Ricky-Huang/p/" id="previewImg">

<input type="text" name="userName" id="userName">

<input type="text" name="userAge" id="userAge">

<button id="submitBtn">点击提交</button>

我们在html中声明两个标签,imgPicker用来做上传图片用,而previewImg用来做预览图片用

1.初始化插件:

var uploader=Webuploader.create({

      auto:false,  //这里我们设置不自动上传,true则为自动上传

      swf:'uploader.swf',

      server:'192.168.1.123:8888/user/register', //文件提交的服务器地址

      picker:'#imgPicker',

　　fileval:'userAvatar',//此属性是你提交的图片的name属性值,相当于<input type="file" name="userAvatar">,如果不设置,系统有默认值

      accept:{

          extensions:'gif,jpg,jpeg,png',//可接受的文件后缀名

          mimeTypes:'image/*'

      }

 

})

    以上就是本篇文章【百度上传工具webuploader,图片上传附加参数】的全部内容了，欢迎阅览 ！ 文章地址：http://lanlanwork.gawce.com/quote/10384.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 阁恬下移动站 http://lanlanwork.gawce.com/mobile/ , 查看更多