Question

我在html和css中有下一个代码，我想在预览类中使用jquery上传的show image。

怎么做？

另外，如何删除上传的图片？

HTML

<form id="myform">
   <div class="preview">
      <span class="btn_upload">
      <input type="file" multiple id="imag" title="" />
      Add
      </span>
   </div>
   <div class="preview">
      <span class="btn_upload">
      <input type="file" multiple id="imag" title="" />
      Add
      </span>
   </div>
</form>

CSS

.btn_upload {
cursor:pointer;
display:inline-block;
overflow:hidden;
position:relative;
margin-top:10px;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-box-shadow:inset 0 1px 0 0 #abbeef;
-webkit-box-shadow:inset 0 1px 0 0 #abbeef;
box-shadow:inset 0 1px 0 0 #abbeef;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a72d4',endColorstr='#1160b8');
background-color:#2a72d4;
border:1px solid #166b8a;
padding:5px 10px;
}

.btn_upload input {
cursor:pointer;
height:100%;
position:absolute;
filter:alpha(opacity=1);
-moz-opacity:0.01;
opacity:0.01;
}

.preview {
width:120px;
height:100px;
border:1px solid red;
margin-right:10px;
float:left;
}

谢谢答案。

Answer 1

我建议你没有几个具有相同ID的控件。使用img控件渲染图像，img控件将使用预览类。

这就是我通常的做法：

标记：

<form id="myform">
   <div class="preview">
      <span class="btn_upload">
      <input type="file" multiple id="imag" title="" />
      Add
      </span>
<img id="ImgPreview" src="#" class="preview" />

   </div>
   <div class="preview">
      <span class="btn_upload">
      <input type="file" multiple id="imag2" title="" />
      Add
      </span>
   </div>
</form>

Jquery代码：

$("#imag").change(function () {
            // add your logic to decide which image control you'll use
            var imgControlName = "#ImgPreview";
            readURL(this, imgControlName);
        });

  function readURL(input, imgControlName) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $(imgControlName).attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

以下是您修改过的小提琴：http://jsfiddle.net/J24yN/2/

请注意，我只针对第一个上传程序执行了此操作，但您可以轻松地将代码扩展到多个上传程序。

编辑：

我更新了我的答案以添加删除图像逻辑。同样，您必须添加自己的逻辑，以便在您拥有不同控件时选择要删除的实际图像：

http://jsfiddle.net/J24yN/4/

预览在jquery上传的图片

1 个答案: