hrml5图片上传或者调用阿里百川的方法上传

  <ul id="addImg">

       <li id="addBtn">

         <img src="../../style/img/addAlbum.png" id="imagesAdd">

         <input type="file"  id="upfile" accept="image/*" multiple />

       </li>
    </ul>

/*js图片上传*/

document.querySelector('#upfile').onchange = function (evt) {

    var files = evt.target.files;

    for(var i = 0, f; f = files[i]; i++){

        if(!f.type.match('image.*')) continue;

        var reader = new FileReader();

        reader.onload = (function(theFile){

            return function(e){
var upfile=document.querySelector("#addBtn");

                var img = document.createElement('img');

                img.title = theFile.name;

                img.src = e.target.result;
var li = document.createElement('li');
var b = document.createElement('b');
li.appendChild(img);
li.appendChild(b);
document.querySelector('#upfile').value = "";

                document.querySelector('#addImg').insertBefore(li,upfile);
var del_btn=jQuery('#addImg li b');
for(var j=0;j<del_btn.length;j++){
 (function(n){
jQuery(del_btn
.click(function(){
  jQuery(this).parent().remove(); 
}))  
 })(j)
}

            }

        })(f);

        reader.readAsDataURL(f);

    }  

}

/*jq图片上传*/
document.querySelector('#upfile').onchange = function (evt) {
$("#addImg").find("#addBtn").show();
var files = evt.target.files;
for(var i = 0, f; f = files[i]; i++){
if(!f.type.match('image.*')) continue;
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var titles=theFile.name;
var imgSrc = e.target.result;
var doms=$('<li><img src='+imgSrc+' title='+titles+'><i onClick="del(this);"></i></li>');
$(doms).insertBefore("#addBtn");
$()
if($("#addImg li").length<=4){//限制图片张数
$("#addBtn").show();
}else{
$("#addBtn").hide();
}
}
})(f);
reader.readAsDataURL(f);
}  
}

阿里百川：

<script src="../../style/js/upfile.js"></script>  

<!--图片上传-->

 <div class="addBox">

    <ul id="addImg">

       <li id="addBtn">

         <img src="../../style/img/addAlbum.png" id="imagesAdd">

         <input id="file" type="file"  onChange="upload(event)">

       </li>

    </ul>

</div>

var uploader = uploadJSSDK;

function upload(e) {
var files = e.target.files;
//上传
for (var i = 0; i < files.length; i++) {
uploader({
file: files[i],   //文件，必填,html5 file类型，不需要读数据流
token: 'UPLOAD_AK_TOP MjMzMTY4NTg6ZXlKa1pYUmxZM1JOYVcxbElqb2lNU0lzSW1sdWMyVnlkRTl1YkhraU9pSXdJaXdpYm1GdFpYTndZV05sSWpvaVozVnphR1Z1YW1saGIzbHZkU0lzSW1WNGNHbHlZWFJwYjI0aU9pMHhmUTplZWY1Nzc5Y2YzNDNmYjRhNzRmYjAyMDQ5OGU3YWZlMGJmNmI0MmUw',
 //token，必填
name: new Date().getTime(),
dir: '/pic',  //目录，选填，默认根目录''
retries: '0',  //重试次数，选填，默认0不重试
maxSize: '2048000',  //上传大小限制，选填，默认0没有限制
callback: function (percent, result) {
//percent（上传百分比）：-1失败；0-100上传的百分比；100即完成上传
//result(服务端返回的responseText，json格式)
console.log(result)
$('#upfile').val('');
if (result.code == 'OK') {
var doms = $('<li><img src=' + result.url + '><i onClick="del(this);"></i></li>');
$(doms).insertBefore("#addBtn");
} else {
layer.msg('文件大小不能超过2M！')
}
if ($("#addImg li").length <= 1) {//限制图片张数
$("#addBtn").show();
} else {
$("#addBtn").hide();
}
}
});
}

}

//删除上传的图片

function del(obj) {
if ($("#addImg li").length <= 4) {//限制图片张数
$("#addBtn").show();
} else {
$("#addBtn").hide();
}
$(obj).parent().remove();

}