上传多张图片，按钮样式，图片样式

@@ -14,32 +14,31 @@
         <div class="up-image-tips">
         为了帮助我们更好的解决问题，请您上传图片,最多可上传4张图片，每张图片大小不超过5M.
         </div>
-        <ul class="up-image-list">
+        <ul class="up-image-list clearfix">
             <li>
                 <span class="btn-del" title="删除"></span>
-                <img src="" width="126" height="126"/>
-                <!--<input type="file" name="file" accept="image/*" id="upload-img-0" />-->
+                <img src=""/>
                 <input type="hidden" name="imgs" />
             </li>
             <li>
                 <span class="btn-del" title="删除"></span>
-                <img src="" width="126" height="126"/>
-                <!--<input type="file" name="file" accept="image/*" id="upload-img-1" />-->
+                <img src=""/>
                 <input type="hidden" name="imgs" />
             </li>
             <li>
                 <span class="btn-del" title="删除"></span>
-                <img src="" width="126" height="126"/>
-                <!--<input type="file" name="file" accept="image/*" id="upload-img-2" />-->
+                <img src=""/>
                 <input type="hidden" name="imgs" />
             </li>
             <li>
                 <span class="btn-del" title="删除"></span>
-                <img src="" width="126" height="126"/>
-                <!--<input type="file" name="file" accept="image/*" id="upload-img-3" />-->
+                <img src=""/>
                 <input type="hidden" name="imgs" />
             </li>
         </ul>
+        <div class="upload-btn">
+            上传图片
             <input id="upload-img-{{@key}}" type="file" name="file" multiple="true" accept="image/*"  />
         </div>
+    </div>
 </div>

@@ -163,15 +163,14 @@ $goodsTable.on('click', '.btn-del', function(e) {
     resetImg($p);
 });
 
-$file.each(function(e) {
-    var $this = $('#upload-img-' + e),
-        $par = $this.closest('.problem-description');
+// $file.each(function(e) {
+//     var $this = $('#upload-img-' + e);
 
-    if (!window.location.origin) {
-        window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
-    }
+    // if (!window.location.origin) {
+    //     window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+    // }
 
-    fileChangeEvent($this)//
+    fileChangeEvent();//
 
     // $this.qupload({
     //     button_image_url: '',
@@ -203,20 +202,17 @@ $file.each(function(e) {
     //         });
     //     }
     // });
-});
+// });
 
-function fileChangeEvent($file) {
-    console.log('111111111111111');
+function fileChangeEvent() {
 
     // 图片上传
     $goodsTable.on('change', 'input[type=file]', function() {
 
         var $f = $(this);
-        var $p = $f.siblings('.up-image-list');
+        var $p = $f.parent().siblings('.up-image-list');
 
-        var $lis = $p.find('li:not(.selected)');
-        var $li = $($lis[0]);
-        console.log('===========================');
+        var $unSelectLi = $p.find('li:not(.selected)');
 
         if ($f.val()) {
             $.ajaxFileUpload({
@@ -228,25 +224,35 @@ function fileChangeEvent($file) {
                 },
                 dataType: 'json',
                 success: function(data /* , status */) {
-                    var url, relaUrl;
 
-                    if (data && data.code === 200 && data.data && data.data.images && data.data.images[0]) {
-                        url = data.data.images[0];
-                        relaUrl = data.data.imagesList[0];
+                    var resData = data.data,
+                        len = resData.images.length > $unSelectLi.length ?
+                            $unSelectLi.length : resData.images.length;
+
+                    if (data && data.code === 200 && data.data && data.data.images) {
+
+                        for (var i = 0; i < len; i++) {
+                            var url, relaUrl,
+                                $li = $($unSelectLi[i]);
+
+                            url = resData.images[i] +
+                                '?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90';
+                            relaUrl = resData.imagesList[i];
                             $li.find('img').attr('src', url).attr('source-url', url);
                             $li.find('input[name=imgs]').val(relaUrl);
                             $li.addClass('selected');
+                        }
+
 
                     } else if (data && data.message) {
                         alert(data.message);
                     }
                 },
-                error: function() {    /** data, status, e **/
+                error: function(error) {    /** data, status, e **/
                     alert('上传失败，请稍后再试！');
                 },
                 complete: function() {
                     $f.clone().replaceAll($f);
-                    // fileChangeEvent($f);
                 }
             });
         }

@@ -211,6 +211,28 @@
                 background: #000;
             }
 
+            .upload-btn {
+                width: 116px;
+                height: 33px;
+                position: relative;
+                line-height: 33px;
+                background: #000;
+                color: #fff;
+                text-align: center;
+                margin-bottom: 5px;
+                overflow: hidden;
+
+                input[type='file'] {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+                    opacity: 0;
+                }
+            }
+
             .btn_upload_text {
                 font-family: SimHei;
                 font-size: 16px;