Как загружать и извлекать изображения в приложении, в котором клиент использует HTML + Jquery, а сервер основан на Rest Services

Question

Как загружать и извлекать изображения в приложении, в котором клиент использует HTML + Jquery, а сервер основан на Rest Services

0

Я разрабатываю приложение, в котором клиент основан на HTML + CSS3 + JQuery, а сервер основан на службах REST.

Прямо сейчас я застрял в проблеме загрузки и получения изображений в своем приложении. Я хочу иметь решение, которое будет совместимо со всеми браузерами.

Можете ли вы предложить мне, как можно обрабатывать (загружать и извлекать) изображения в моем приложении.

Случай использования: пользователь вошел в мое приложение и хочу загрузить его изображение в качестве изображения профиля, приложение должно хранить изображение пользователя и отображать его обратно при входе пользователя.

ваша помощь высоко ценится.

coolnimu 29 март 2014, в 13:02

Источник

Теги:

jquery

rest

1 ответ

Ещё вопросы

coolnimu · Answer 1 · 2014-04-04T15-44-00.000Z

Наконец, я нашел решение моей проблемы. Ниже приведен пример загрузки и извлечения изображений с использованием HTML + AJAX (JQUERY) +REST

Код HTML:

enter code here
<html>
<input type="file" id="uphoto" class="textFieldsReg">
<input type="button" value="upload photo" onClick="uploadImage()">
<input type="button" value="get photo" onClick="getImage()">   
<img src="" id="theimage">             
</html>

Javascript:

enter code here


 function getImage() 
{
    $.ajax({
    url: 'http://<server>:<port>/getImage/',
    type: 'POST',    
    cache: false,
    contentType: false,
    processData: false,
    dataType:'text',
    }).done(
    function( json ) 
    {
      document.getElementById("theimage").width='100';
      document.getElementById("theimage").height='100';
      document.getElementById("theimage").src='data:image/png;base64,'+json;      
     }
    })
    .fail(
    function( jqxhr, textStatus, error ) 
    {
      var err = textStatus + ", " + error;
      console.log( "Request Failed: " + err );
  });

}

enter code here
function uploadImage(event)
{
  var formData = new FormData();
  formData.append('file', $('#uphoto').get(0).files[0]);
  $.ajax({
  url: 'http://<server>:<port>/uploadImage/',
  type: 'POST',
  data:formData ,
  cache: false,
  contentType: false,
  processData: false,
  }).done(
  function( json ) 
  {
    console.log('done');
  }).fail(
  function( jqxhr, textStatus, error ) 
  {
    var err = textStatus + ", " + error;
    console.log( "Request Failed: " + err );
  });
}

Код REST:

enter code here
    @POST
    @Path("/uploadImage/")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response uploadFile(List<Attachment> attachments) {
        for(Attachment attr : attachments) {
            DataHandler handler = attr.getDataHandler();
            try {
                InputStream stream = handler.getInputStream();
                MultivaluedMap map = attr.getHeaders();
                OutputStream out = new FileOutputStream(new File("C://image.jpg"));

                int read = 0;
                byte[] bytes = new byte[1024];
                while ((read = stream.read(bytes)) != -1) {
                    out.write(bytes, 0, read);
                }
                stream.close();
                out.flush();
                out.close();
            } catch(Exception e) {
              e.printStackTrace();
            }
        }     
        return Response.ok("file uploaded").build();
    }
enter code here



        @POST
        @Path("/getImage/")
        public String getImage() 
        {
            byte[] bytes = null ;
            try 
            {
                FileInputStream fis = new FileInputStream( "C://image.jpg" );
                bytes = IOUtils.readBytesFromStream(fis);
            }catch (IOException e) 
            {
                e.printStackTrace();
            }
            String obj = Base64.encode(bytes);          
            return obj;
        }