当前位置：首页 > 网页特效 > 图片特效

jQuery基于svg图片上传预览代码

分类：图片特效日期：2024-05-14 点击(9) 评论(0)

jQuery基于svg图片上传预览代码

简介

特效描述：基于jQuery实现 svg 图片上传 预览代码。基于jQuery实现svg图片上传预览代码
#### 代码结构

------------
1. 引入JS
```javascript
<script type="text/javascript" src="js/svg.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
```
2. HTML代码
```html
<section>
    <h2>svg制作多图上传</h2>
    <article>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      </div>
    <div style="clear: left;"></div>
   </article>
</section>
<script type="text/javascript">
  //选择图片
  var loadImg = function(obj){
    $(obj).parent().find(".upload_input").click();
  }
  //删除
  var deleteImg = function(obj){
    $(obj).parent().find('input').val('');
    $(obj).parent().find('.preview').html('');
    $(obj).hide();
  }
</script> 

<script type="text/javascript">
function preview(file) {
  var prevDiv = $(file).parent().find('.preview');
  if (file.files && file.files[0]) {
    var reader = new FileReader();
    reader.onload = function(evt) {
      prevDiv.html('<img src="' + evt.target.result + '" />');
    }
    reader.readAsDataURL(file.files[0]);
  } else {//IE
    prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
  }
  $(file).parent().find('.delete').show();
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
```

web299.com

jQuery基于svg图片上传预览代码

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果