HTML:通过单击同一张图片来更改图片

时间:2018-11-17 07:24:39

标签: html css angular typescript

伙计们,我想通过单击当前图像来选择图像。

这是我的代码。 url包含默认图像。我想更改当前的可点击图像,当使用它单击时,他可以选择新图像。如果没有<input type="file">,这可能吗?

    onFileChanged(event) {
 
        if (event.target.files && event.target.files[0]){
            var reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]);
            reader.onload = (event) => { // 
                this.url = event.target.result;
            }
        }
    }
<div class="col-md-3">
  <img [src]="url" style="bordered:5px; double-black; border-radius: 8px; max-height: 200px; max-width: 390px; border: 2px solid #ddd;"> 
</div>

1 个答案:

答案 0 :(得分:2)

您需要一个隐藏文件输入字段

let image = #imageLiteral(resourceName: "WelcomScreen1")
guard let imageData = UIImagePNGRepresentation(image) else {
        print("Could not get JPEG representation of UIImage")
        return
    }
let body1:  [String: String] = [ "token": token ]
let body: [String: Any] = [
        "data": body1
]

Alamofire.upload(multipartFormData: { (multipartFormData) in 
        for (key, value) in body {
            for (key, value) in body1{
               multipartFormData.append((value as AnyObject).data(using: String.Encoding.utf8.rawValue)!, withName: key)
            }
        }
        multipartFormData.append(imageData,
                                 withName: "image",
                                 fileName: "image.png",
                                 mimeType: "image/png")
    }, to: profilePicURL(userId: user_id), method: .post, headers: nil)` 

有关工作示例,请检查stackblitz