Javascript-how can I upload an image and preview it by clicking the Avatar in the marketplace?

I don't know how to get it out.

I don't know how to get it out.

Reply content:

I don't know how to get it out.

We recommend that you use the Web Uploader of the Baidu FEX team. Recently, I feel that the functions are comprehensive and can be used for multipart and concurrent uploads, at the same time, you can get the preview image of the image before uploading (the size can be customized, yesBase64Encoding ). In additionFile APIIn additionFlashPlug-ins support browsers of earlier versions. If you are interested, read the examples on the official website.

SetMake transparency 0, put it on this avatar, the size is the same as this avatar

First write an uploaded input, then hide it, and then make a button or p to give it an onclick event. When it is clicked, it triggers the input, then the upload window opens.
The preview function is to first pass the image to the server, then get the url, and then use a p to display it, that is, preview. If you want to cut down something at this time, you can pass it to the server and record the file to the database.
My own practice is like this ..

It is not difficult to hide forms submitted using ajax.

I just made one, which is similar to that of the subject.File APIThe old browser is not compatible. For more information, see.

Html

 
 
x
      
  

Css

.file-selector {  position: relative;  overflow: hidden;  display: inline-block;  width: 120px;  height: 160px;  border: 3px dashed #e7e7eb;  margin-right: 20px;  &:hover {    border-color: #888;    .am-icon-upload {      color: #888;    }  }  &.has-preview {    border: 0;    .am-icon-upload,    input {      display: none;    }  }  .am-icon-upload {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    font-size: 48px;    color: #e7e7eb;  }  .preview-container {    width: 100%;    height: 100%;    display: none;    position: relative;        img {      width: 100%;      height: 100%;    }    .remove-button {      top: 0;      right: 0;    }  }  input {    position: absolute;    top: 0;    right: 0;    margin: 0;    opacity: 0;    font-size: 200px;    direction: ltr;    cursor: pointer;  }}

Js

$('#js-image').on('change', function() {  var $input = $(this);  var $container = $input.closest('.file-selector');  var $previewContainer = $container.find('.preview-container');  var $previewImage = $previewContainer.find('.js-preview');  var reader = new FileReader();  reader.onload = function(e) {    $previewImage.attr('src', e.target.result);    $container.addClass('has-preview');    $previewContainer.show();    $previewContainer.find('.js-remove-image').on('click', function() {      $input.val(null);      $previewImage.attr('src', null);      $container.removeClass('has-preview');      $previewContainer.hide();      $(this).off('click');    });  }  reader.readAsDataURL(this.files[0]);});

I only know that HTML 5 can be previewed.

Html5 fileapi change processing is enough.
Example http://www.cnblogs.com/snandy/archive/2012/11/26/2789350.html

If compatibility is required, you can try the jQuery File Upload plug-in.

There are many ways to do this, right? Open the upload box with the onclick event of js, upload it to the server with ajax, and then introduce the image with ajax.