javscript 七牛上传图片

    环境:jdk 18

 jar版本: <dependency>
                <groupId>com.qiniu</groupId>
                <artifactId>qiniu-java-sdk</artifactId>
                <version>7.2.4</version>
            </dependency>


   html:      <input type="hidden" value="${idcard.frontPhoto}" id="frontPhoto" name="frontPhoto">

                  <div id="container">
                          <a class="btn btn-default btn-lg " id="pickfiles">
                                      <img id="img1" class="imgs" src="/img/upload.png"  width="94px" style="height: 94px;width: 94px;"/>
                            </a>
                   </div>


   js:

var uploader  = Qiniu.uploader({
   runtimes: 'html5,flash,html4',
   browse_button: 'pickfiles',//上传按钮的ID
   container: 'container',//上传按钮的上级元素ID
   drop_element: 'container',
   max_file_size: '100mb',//最大文件限制
   flash_swf_url: '/static/js/plupload/Moxie.swf',
   dragdrop: false,
   get_new_uptoken: false,
   chunk_size: '4mb',//分块大小
   uptoken_url: '/auth/job/uptoken',//设置请求qiniu-token的url
   domain: 'http://huang1211.qiniudn.com/',//自己的七牛云存储空间域名,huang1211是我的空间名,我的是华东地区,其他地域js要改源码,js是默认华   //东地区上传的,是我遇 到的一个坑,例如,华南,将js里up.qiniu.com和upload.qiniu.com分别替换为up-z2.qiniu.com和upload-z2.qiniu.com
   unique_names: false,
   save_key:false,
   //文件类型过滤,这里限制为图片类型
   filters: {
     mime_types : [
       {title : "Image files", extensions: "jpg,jpeg,gif,png"}
     ]
   },
   auto_start: false,//先预览后上传
   init: {
       'FilesAdded': function(up, files) {
   for (var i = 0; i < files.length; i++) {
        showPreview ("img1",files[i]);
   }


       },
       'Key':function(up, file){

                                  //自定义文件名上传
          var key = getTimesamp();

          $("#handPhoto").val("http://opbr3dxtw.bkt.clouddn.com/"+key);
          return key;
       },
       'FileUploaded': function(up, file, info) {
                           
                     },
                     'UploadComplete':function(up, file){
                     
                       
                     },                            
   'Error': function(up, err, errTip) {
           alert(errTip);
}


   }
});

        function getTimesamp(){
             var myDate=new Date();
             var myYear = myDate.getYear();
             var myMonth = myDate.getMonth()+1;
             var myHour= myDate.getHours();
             var mda=myDate.getDate(); //获取当前日
             var myMinute = myDate.getMinutes();
             var mySecond = myDate.getSeconds();
             var mhaom=myDate.getMilliseconds();    //获取当前毫秒数(0-999)
             var fileName = myYear+""+myMonth+""+mda+""+myHour+""+myMinute+""+mySecond+""+mhaom+".jpg";
             return fileName;
        }
        //本地预览关键方法
    function showPreview (id,file) {
   var image = new Image();
   var preloader = new mOxie.Image();
   preloader.onload = function() {
       preloader.downsize( 300, 300 );
       //image.setAttribute( "src", preloader.getAsDataURL() );
       $('#'+id).attr("src",preloader.getAsDataURL());
   };
   preloader.load( file.getSource() );
}

    java:


import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;


import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializerFeature;

         /**
* 获取七牛token
* @param map
* @param response
* @return
*/
@RequestMapping(value = "/uptoken", method = RequestMethod.GET)
@ResponseBody
public String uptoken(HttpServletResponse response) {
Auth auth = Auth.create("Ap6TXkuRBdjrBclWKgTme67T5x4K7i8XSJZmRCvU","pmOGSkWma0kD-m-HEhLHedu5GWv_VApqnF80HzOZ");
String key = "huang1211";//空间名
String upToken = auth.uploadToken(key);
JSONObject json = new JSONObject();
json.put("uptoken", upToken);
return JSON.toJSONString(json, SerializerFeature.BrowserCompatible);
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值