移动端 图片上传功能

html代码

                            <div class="main" id="sctp">
                                <div class="upload-content">
                                    <h3>上传图片</h3>
                                    <div class="content-img">
                                        <ul class="content-img-list" id="img_wrap"></ul>
                                        <div class="file">
                                            <i class="gcl gcladd"></i>
                                            <input type="file" name="file" accept="image/*" id="upload" multiple="multiple" />
                                        </div>
                                    </div>
                                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

js代码

　　　　　　var imgFile = []; //文件流
　　　　　　var imgSrc = []; //图片路径

　　

            // 上传图片功能
            $('#upload').on('change', function(e) {
                var fileList = this.files;
                var imgBox = '.content-img-list';
                for (var i = 0; i < fileList.length; i++) {
                    if (fileList[i].size > 1024 * 1024 * 1024 * 1) { //1M
                        return alert("上传图片不能超过1024MB");
                    };
                    if (fileList[i].type != 'image/png' && fileList[i].type != 'image/jpeg' && fileList[i].type != 'image/gif') {
                        return alert("图片上传格式不正确");
                    }




                    imgFile.push(fileList[i]); //文件流



                    var imgSrcI = getObjectURL(fileList[i]);
                    imgSrc.push(imgSrcI); //图片路径



                }
                addNewContent(imgBox);
                this.value = null; //上传相同图片
            });
 
 


            // 鼠标经过显示删除按钮
            $('.content-img-list').on('mouseover', '.content-img-list-item', function() {
                $(this).children('div').removeClass('hide');
            });
            // 鼠标离开隐藏删除按钮
            $('.content-img-list').on('mouseleave', '.content-img-list-item', function() {
                $(this).children('div').addClass('hide');
            });

            // 单个图片删除

            $(".content-img-list").on("click", '.content-img-list-item a .gcllajitong', function() {

                var index = $(this).parent().parent().parent().index();

                imgSrc.splice(index, 1);

                imgFile.splice(index, 1);

                var boxId = ".content-img-list";

                addNewContent(boxId);

            });

 

 

            //图片展示

            function addNewContent(obj) {

                $(obj).html("");

                for (var a = 0; a < imgSrc.length; a++) {

                    var oldBox = $(obj).html();

                    $(obj).html(oldBox + '<li class="content-img-list-item"><img src="' + imgSrc[a] + '" alt="">' +

                        '<div class="hide"><a index="' + a + '" class="delete-btn"><i class="gcl gcllajitong"></i></a>');

                }

            }

 

 

            //建立可存取到file的url

            function getObjectURL(file) {

                var url = null;

                if (window.createObjectURL != undefined) { // basic

                    url = window.createObjectURL(file);

                } else if (window.URL != undefined) { // mozilla(firefox)

                    url = window.URL.createObjectURL(file);

                } else if (window.webkitURL != undefined) { // webkit or chrome

                    url = window.webkitURL.createObjectURL(file);

                }

                return url;

            }