Не открывается изображение для обрезки Jcrop

319
08 марта 2017, 19:31

Есть скрипт когда пытаюсь сделать превью то превю фото не открывается, но если готовое фото вставить то все работает по ссылке то есть так но новые фото все так же не показваются хотя в консоли браузера грузятся вот код

function readURL(input) { 
  if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
      $('#target').show(); 
 
      $('#target').attr('src', e.target.result); 
    }; 
 
    reader.readAsDataURL(input.files[0]); 
  } 
} 
 
$("#photo").change(function() { 
  readURL(this); 
 
}); 
 
 
 
var x1, y1, x2, y2, crop = 'crop/'; 
var jcrop_api; 
jQuery(function($) { 
  $('#target').Jcrop({ 
    onChange: showCoords, 
    onSelect: showCoords 
  }, function() { 
    jcrop_api = this; 
  }); 
  // Снять выделение  
  $('#release').click(function(e) { 
    release(); 
  }); 
  // Соблюдать пропорции  
  $('#ar_lock').change(function(e) { 
    jcrop_api.setOptions(this.checked ? { 
      aspectRatio: 4 / 3 
    } : { 
      aspectRatio: 0 
    }); 
    jcrop_api.focus(); 
  }); 
  // Установка  минимальной/максимальной ширины и высоты 
  $('#size_lock').change(function(e) { 
    jcrop_api.setOptions(this.checked ? { 
      minSize: [80, 80], 
      maxSize: [350, 350] 
    } : { 
      minSize: [0, 0], 
      maxSize: [0, 0] 
    }); 
    jcrop_api.focus(); 
  }); 
  // Изменение координат  
  function showCoords(c) { 
    x1 = c.x; 
    $('#x1').val(c.x); 
    y1 = c.y; 
    $('#y1').val(c.y); 
    x2 = c.x2; 
    $('#x2').val(c.x2); 
    y2 = c.y2; 
    $('#y2').val(c.y2); 
    $('#w').val(c.w); 
    $('#h').val(c.h); 
    if (c.w > 0 && c.h > 0) { 
      $('#crop').show(); 
    } else { 
      $('#crop').hide(); 
    } 
  } 
}); 
 
function release() { 
  jcrop_api.release(); 
  $('#crop').hide(); 
} 
// Обрезка изображение и вывод результата 
jQuery(function($) { 
  $('#crop').click(function(e) { 
    var img = $('#target').attr('src'); 
    $.post('action.php', { 
      'x1': x1, 
      'x2': x2, 
      'y1': y1, 
      'y2': y2, 
      'img': img, 
      'crop': crop 
    }, function(file) { 
      $('#cropresult').append('<img  src="' + crop + file + '" class="mini">'); 
      release(); 
    }); 
  }); 
});
/* jquery.Jcrop.css v0.9.12 - MIT License */ 
/* 
  The outer-most container in a typical Jcrop instance 
  If you are having difficulty with formatting related to styles 
  on a parent element, place any fixes here or in a like selector 
 
  You can also style this element if you want to add a border, etc 
  A better method for styling can be seen below with .jcrop-light 
  (Add a class to the holder and style elements for that extended class) 
*/ 
.jcrop-holder { 
  direction: ltr; 
  text-align: left; 
} 
/* Selection Border */ 
.jcrop-vline, 
.jcrop-hline { 
  background: #ffffff url("Jcrop.gif"); 
  font-size: 0; 
  position: absolute; 
} 
.jcrop-vline { 
  height: 100%; 
  width: 1px !important; 
} 
.jcrop-vline.right { 
  right: 0; 
} 
.jcrop-hline { 
  height: 1px !important; 
  width: 100%; 
} 
.jcrop-hline.bottom { 
  bottom: 0; 
} 
/* Invisible click targets */ 
.jcrop-tracker { 
  height: 100%; 
  width: 100%; 
  /* "turn off" link highlight */ 
  -webkit-tap-highlight-color: transparent; 
  /* disable callout, image save panel */ 
  -webkit-touch-callout: none; 
  /* disable cut copy paste */ 
  -webkit-user-select: none; 
} 
/* Selection Handles */ 
.jcrop-handle { 
  background-color: #333333; 
  border: 1px #eeeeee solid; 
  width: 7px; 
  height: 7px; 
  font-size: 1px; 
} 
.jcrop-handle.ord-n { 
  left: 50%; 
  margin-left: -4px; 
  margin-top: -4px; 
  top: 0; 
} 
.jcrop-handle.ord-s { 
  bottom: 0; 
  left: 50%; 
  margin-bottom: -4px; 
  margin-left: -4px; 
} 
.jcrop-handle.ord-e { 
  margin-right: -4px; 
  margin-top: -4px; 
  right: 0; 
  top: 50%; 
} 
.jcrop-handle.ord-w { 
  left: 0; 
  margin-left: -4px; 
  margin-top: -4px; 
  top: 50%; 
} 
.jcrop-handle.ord-nw { 
  left: 0; 
  margin-left: -4px; 
  margin-top: -4px; 
  top: 0; 
} 
.jcrop-handle.ord-ne { 
  margin-right: -4px; 
  margin-top: -4px; 
  right: 0; 
  top: 0; 
} 
.jcrop-handle.ord-se { 
  bottom: 0; 
  margin-bottom: -4px; 
  margin-right: -4px; 
  right: 0; 
} 
.jcrop-handle.ord-sw { 
  bottom: 0; 
  left: 0; 
  margin-bottom: -4px; 
  margin-left: -4px; 
} 
/* Dragbars */ 
.jcrop-dragbar.ord-n, 
.jcrop-dragbar.ord-s { 
  height: 7px; 
  width: 100%; 
} 
.jcrop-dragbar.ord-e, 
.jcrop-dragbar.ord-w { 
  height: 100%; 
  width: 7px; 
} 
.jcrop-dragbar.ord-n { 
  margin-top: -4px; 
} 
.jcrop-dragbar.ord-s { 
  bottom: 0; 
  margin-bottom: -4px; 
} 
.jcrop-dragbar.ord-e { 
  margin-right: -4px; 
  right: 0; 
} 
.jcrop-dragbar.ord-w { 
  margin-left: -4px; 
} 
/* The "jcrop-light" class/extension */ 
.jcrop-light .jcrop-vline, 
.jcrop-light .jcrop-hline { 
  background: #ffffff; 
  filter: alpha(opacity=70) !important; 
  opacity: .70!important; 
} 
.jcrop-light .jcrop-handle { 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  background-color: #000000; 
  border-color: #ffffff; 
  border-radius: 3px; 
} 
/* The "jcrop-dark" class/extension */ 
.jcrop-dark .jcrop-vline, 
.jcrop-dark .jcrop-hline { 
  background: #000000; 
  filter: alpha(opacity=70) !important; 
  opacity: 0.7 !important; 
} 
.jcrop-dark .jcrop-handle { 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  background-color: #ffffff; 
  border-color: #000000; 
  border-radius: 3px; 
} 
/* Simple macro to turn off the antlines */ 
.solid-line .jcrop-vline, 
.solid-line .jcrop-hline { 
  background: #ffffff; 
} 
/* Fix for twitter bootstrap et al. */ 
.jcrop-holder img, 
img.jcrop-preview { 
  max-width: none; 
} 
 
#sidebar { 
    height: 100vh; 
    background-color: #fff; 
} 
i.fa.fa-cog.fa-spin.fa-5x.fa-fw { 
    font-size: 20vw; 
} 
.address_check { 
    font-size: 1vw; 
        padding-bottom: 1vw; 
} 
.info-check { 
    color: black; 
    font-weight: normal; 
} 
#hideModal{ 
    display: none; 
} 
#showFemale{ 
    display: none; 
} 
#showMale{ 
    display: none; 
} 
i.fa.fa-pencil-square-o { 
    float: right; 
} 
.btn-group.mr-2 { 
    vertical-align: text-top; 
} 
.prace-check { 
    border-width: 0 0 1px 0px; 
    border-style: dashed; 
    font-size: 1.8vw; 
    background-color: rgba(237, 237, 29, 0.36); 
    padding: initial; 
    padding: 5px; 
    text-align: center; 
} 
 
 
 
.logo-center { 
    text-align: center; 
} 
.row.formBorder { 
    border: 1px solid rgb(30, 190, 190); 
    margin: 5px; 
    padding: 5px; 
    border-radius: 5px; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
.row.formBorder:hover{ 
   cursor: pointer; 
    box-shadow: 0 0 5px #666;    
} 
.name_object_check { 
    color: black; 
    font-size: 2vw; 
    font-weight: bold; 
} 
#sidebar .list-group-item { 
    border-radius: 0; 
    background-color: #eef2f4; 
    color: #535c69!important; 
    border-left: 0; 
    border-right: 0; 
    /* border-color: #333333; */ 
    white-space: nowrap; 
    text-decoration: none; 
} 
strong.color-blue { 
    color: #36b5df; 
} 
div#preview { 
    position: relative; 
    left: 15px; 
} 
i.fa.fa-at { 
    font-size: 2vw; 
    font-weight: inherit; 
} 
i.fa.fa-mobile{ 
    font-size: 2vw; 
    font-weight: inherit; 
    padding-left: 7px; 
} 
.col-md-7.fullContactCompany.buttom-check-emp { 
    margin: 10px 0 15px 0; 
} 
.fullContactCompany { 
font-style: inherit; 
    background-color: #eef2f4; 
    border: 1px solid #36b5df; 
    text-align: start;padding: 6px; 
        font-weight: bold; 
    font-family: sans-serif; 
    font-size: 1.2vw; 
line-height: 2vw; 
border-radius: 27px; 
margin-top: 5px; 
padding-left: 20px; 
} 
.fullContactCompanyEmployees{ 
        font-style: inherit; 
    background-color: #eef2f4; 
    border: 1px solid #36b5df; 
    text-align: start; 
    padding: 6px; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 1.2vw; 
    line-height: 2vw; 
    border-radius: 27px; 
    margin-top: 0px; 
    margin-bottom: 14px; 
} 
.deportament { 
    display: inline-table; 
    background: #36b5df; 
    margin: 3px; 
    padding: 5px 15px 5px 15px; 
    border-radius: 5px; 
    border: 1px solid #0275d8; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
.deportament:hover{ 
  box-shadow: 0px 3px 6px 0px black; 
} 
p a.btn.btn-primary { 
    position: relative; 
    top: 90px; 
    width: 100%; 
} 
.classImg{ 
height: 116px;  
position: relative;  
max-width: 175px; 
} 
.classImg img{ 
position: absolute;  
margin: auto;  
left: 0;  
top: 0;  
bottom: 0;  
right: 0;  
width: 145px; 
    max-height: 75px; 
} 
.deportamentLink{ 
color: white; 
} 
.deportamentLink:hover{ 
text-decoration: none; 
color: white; 
} 
li.nav-item { 
    text-decoration: none; 
    list-style-type: none; 
    text-align: center; 
} 
i.fa.fa-times { 
   
    color: red; 
    float: right; 
 
} 
strong.color-white { 
    color: white; 
    font-size: 1.5rem; 
} 
.fileprew { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 100px; 
    height: 100px; 
} 
.fileprew img { 
    max-width: 100%; 
    max-height: 100%; 
 
} 
#fileprewtwo { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 100px; 
    height: 100px; 
} 
#fileprewtwo img { 
    max-width: 100%; 
    max-height: 100%; 
 
} 
.preview { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 100px; 
    height: 100px; 
} 
.preview img { 
    max-width: 100%; 
    max-height: 100%; 
 
} 
.previewtwo { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: 100px; 
    height: 100px; 
} 
.previewtwo img { 
    max-width: 100%; 
    max-height: 100%; 
 
} 
.file_upload_two { 
    overflow: hidden; 
    background: #eee; 
    border: 1px solid #ccc; 
    font-size: 23px; 
    line-height: 1.65; 
    text-align: center; 
    /* padding: 20px; */ 
    width: 95px; 
    top: 96px; 
    height: 40px; 
    width: 32vw; 
    margin-left: 14px; 
    border-radius: 20px; 
    border-color: rgba(0, 0, 255, 0.18); 
    color: #efefef; 
    background-color: rgb(30, 190, 190); 
    text-shadow: -1px 0px 2px black; 
    font-family: sans-serif; 
    font-weight: bold; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
.file_upload_two:hover { 
box-shadow: 0px 2px 2px 1px #6a6666; 
    color: white; 
    cursor: pointer; 
 } 
.file_upload_two input[type=file] { 
  position: relative; 
    top: -40px; 
    line-height: 0px; 
    right: 0; 
    font-size: 200px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    cursor: pointer; 
    height: 0; 
    cursor: pointer; 
} 
#image{ 
  display: none; 
} 
.file_upload_two input[type=file]:hover { 
 cursor: pointer; 
  } 
 
#timedisplay { 
    color: #fff; 
    display: inline-block; 
    font-size: 38px; 
    font-family: "OpenSans-Light",sans-serif; 
    height: 63px; 
    line-height: 39px; 
    position: relative; 
    vertical-align: top; 
    z-index: 5; 
    float: right; 
} 
a.menuCompanyEmployees { 
    font-size: 1.3em; 
    padding: 0 15px 5px 15px; 
    border-radius: 4px; 
    background-color: #36b5df; 
    color: #ffffff; 
    border-color: #ccc; 
    border-width: 1px 1px 1px 1px; 
    border-style: solid; 
    font-weight: 400; 
    text-decoration: none; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
a.menuCompanyEmployees:hover { 
    box-shadow: 0px 1px 5px 0px black; 
} 
button.btn.btn-info.dropdown-toggle { 
    background: #36b5df; 
    border: 0; 
    font-weight: 600; 
} 
button.btn.btn-info.dropdown-toggle:hover { 
   box-shadow: 2px 2px black; 
 } 
 i.fa.fa-bell-o { 
    color: whitesmoke; 
    font-size: 31px; 
} 
i.problems { 
    font-style: initial; 
    background-color: tomato; 
    border-radius: 5px; 
    color: white; 
    vertical-align: top; 
    font-weight: bold; 
    padding: 2px; 
} 
.bg-color { 
    padding-top: 1.5vw; 
    background-color: #535c69; 
    line-height: normal; 
    margin-bottom: 0; 
} 
/* highlight active menu */ 
 
i.fa.fa-toggle-on.fa-lg.col-xs-1 { 
    color: #36b5df; 
    margin-top: 12px; 
    font-size: 2vw; 
} 
button.btn.btn-info.dropdown-toggle:active { 
  -moz-border-radius: 10px; /* Firefox */ 
  -webkit-border-radius: 10px; /* Safari, Chrome */ 
  -khtml-border-radius: 10px; /* KHTML */ 
  border-radius: 10px;  
 
} 
/* closed state */ 
#sidebar .list-group .list-group-item[aria-expanded="false"]::after { 
  content: " \f0d7"; 
  font-family: FontAwesome; 
  display: inline; 
  text-align: right; 
  padding-left: 5px; 
} 
 
/* open state */ 
#sidebar .list-group .list-group-item[aria-expanded="true"]::after { 
  content: " \f0da"; 
  font-family: FontAwesome; 
  display: inline; 
  text-align: right; 
  padding-left: 5px; 
} 
 
/* level 1*/ 
#sidebar .list-group .collapse .list-group-item  { 
  padding-left: 20px; 
} 
 
/* level 2*/ 
#sidebar .list-group .collapse > .collapse .list-group-item { 
  padding-left: 30px; 
} 
 
/* level 3*/ 
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item { 
  padding-left: 40px; 
} 
.input-file-row-1:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.input-group{ 
  border-radius: 20px; 
  border-width: 1px 0px 1px 1px; 
  background-color: #717a84; 
  border: 0; 
} 
.input-group:focus{ 
  background-color: #fff; 
} 
.form-control{ 
    border-radius: 20px; 
    background-color: #717a84; 
    border: 0; 
} 
button.btn.btn-secondary { 
    background: #717a84; 
    border: 0; 
    border-radius: 20px; 
    color: #999999; 
} 
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { 
    outline: 0; 
    outline-offset: -2px; 
} 
.input-file-row-1{ 
    display: inline-block; 
  margin-top: 25px; 
  position: relative; 
} 
 
html[xmlns] .input-file-row-1{ 
    display: block; 
} 
 
* html .input-file-row-1 { 
    height: 1%; 
} 
 
.upload-file-container {  
  position: relative; 
    width: 274px; 
    height: 203px; 
    display: block; 
    margin: 0 0 -27px 0; 
    overflow: hidden; 
    float: left; 
        right: 8px; 
    margin-left: 23px; 
}  
#hideAvatar { 
    position: relative; 
    float: left; 
    right: 8px; 
    background-image: url(../img/avatar.jpg); 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
    width: 13vw; 
    height: 13vw; 
    border-radius: 50%; 
    background-size: cover; 
    left: 30px; 
    top: -22px; 
} 
#hideAvatar:hover{ 
background-blend-mode: luminosity; 
background-color: tomato; 
cursor: pointer; 
content: "scsd"; 
color: black; 
} 
.upload-file-container:first-child {  
  margin-left: 0; 
}  
 
.upload-file-container > img { 
    width: 44vw; 
    height: auto; 
} 
 
.upload-file-container-text{ 
  font-family: Arial, sans-serif; 
  font-size: 12px; 
  color: #719d2b; 
  line-height: 17px; 
  text-align: center; 
  display: block; 
  position: absolute;  
  left: 0;  
  bottom: 0;  
  width: 100px;  
  height: 35px; 
} 
 
 
.file_upload { 
    overflow: hidden; 
    background: #eee; 
    border: 1px solid #ccc; 
    font-size: 23px; 
    line-height: 1.65; 
    text-align: center; 
    /* padding: 20px; */ 
    width: 95px; 
    top: 96px; 
    height: 40px; 
    width: 17vw; 
    margin-left: 14px; 
    border-radius: 20px; 
    border-color: rgba(0, 0, 255, 0.18); 
    color: #efefef; 
    background-color: rgb(30, 190, 190); 
    text-shadow: -1px 0px 2px black; 
    font-family: sans-serif; 
    font-weight: bold; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
 .file_upload:hover { 
box-shadow: 0px 2px 2px 1px #6a6666; 
    color: white; 
    cursor: pointer; 
 } 
.file_upload input[type=file] { 
  position: relative; 
    top: -40px; 
    line-height: 0px; 
    right: 0; 
    font-size: 200px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    cursor: pointer; 
    height: 0; 
    cursor: pointer; 
} 
#target{ 
   
      width: 43.7vw; 
} 
.file_upload input[type=file]:hover { 
 cursor: pointer; 
  } 
.bg-field{ 
    background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#position{ 
     background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#act{ 
     background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#specialization{ 
     background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#property_type{ 
    background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#the_property{ 
    background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#material{ 
    background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid; 
} 
select#area{ 
    background-color: #eef2f4; 
    border-color: #36b5df; 
    border-width: 1px; 
    border-style: solid;   
} 
button#multi-post { 
    overflow: hidden; 
    background: #eee; 
    border: 1px solid #ccc; 
    font-size: 23px; 
    line-height: 0; 
    text-align: center; 
    /* padding: 20px; */ 
    width: 95px; 
    top: 96px; 
    height: 40px; 
    width: 100%; 
    /* margin-left: 14px; */ 
    border-radius: 20px; 
    border-color: rgba(0, 0, 255, 0.18); 
    color: #efefef; 
    background-color: rgb(30, 190, 190); 
    text-shadow: -1px 0px 2px black; 
    font-family: sans-serif; 
    font-weight: bold; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
} 
.bg-danger { 
    color: #fff!important; 
    border-radius: 7px; 
    background-color: #d9534f!important; 
    padding: 6px; 
    margin-bottom: 10px; 
    text-align: center; 
} 
i.fa.fa-cog { 
    float: right; 
    color: #535c69; 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
    font-size: 2vw; 
    padding-top: 15px;;;; 
} 
i.fa.fa-cog:hover { 
    color: black; 
    cursor: pointer; 
} 
.modal-title { 
    margin: 0; 
    line-height: 0; 
    padding: 15px 0 0 0; 
} 
.modal-header { 
    padding: 10px 20px 15px 20px; 
} 
.modal-header .close { 
    margin-top: -18px; 
} 
@media (max-width:48em) { 
    /* overlay sub levels on small screens */ 
    #sidebar .list-group .collapse.in, #sidebar .list-group .collapsing { 
        position: absolute; 
        z-index: 1; 
        width: 190px; 
    } 
    #sidebar .list-group > .list-group-item { 
        text-align: center; 
        padding: .75rem .5rem; 
        min-width: 39px; 
    } 
    /* hide caret icons of top level when collapsed */ 
    #sidebar .list-group > .list-group-item[aria-expanded="true"]::after, 
    #sidebar .list-group > .list-group-item[aria-expanded="false"]::after { 
        display:none; 
    } 
    .page-header.col-md-5.col-xs-12 { 
    margin: 10px 0 12px 0; 
} 
.padingUp { 
    margin: 5px 0 5px 0; 
} 
} 
 
/* change transition animation to width when entire sidebar is toggled */ 
#sidebar.collapse { 
  -webkit-transition-timing-function: ease; 
       -o-transition-timing-function: ease; 
          transition-timing-function: ease; 
  -webkit-transition-duration: .2s; 
       -o-transition-duration: .2s; 
          transition-duration: .2s; 
} 
 
#sidebar.collapsing { 
  opacity: 0.8; 
  width: 0; 
  -webkit-transition-timing-function: ease-in; 
       -o-transition-timing-function: ease-in; 
          transition-timing-function: ease-in; 
  -webkit-transition-property: width; 
       -o-transition-property: width; 
          transition-property: width; 
 
} 
.avatar { 
    background-color: #333333; 
    width: 25px; 
    height: 25px; 
} 
.ajax-file-upload-statusbar { 
border: 1px solid #0ba1b5; 
margin-top: 10px; 
width: 420px; 
margin-right: 10px; 
margin: 5px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
padding: 5px 5px 5px 15px 
} 
 
.ajax-file-upload-filename { 
width: 300px; 
height: auto; 
margin: 0 5px 5px 0px; 
 
} 
 
.ajax-file-upload-filesize { 
width: 50px; 
height: auto; 
margin: 0 5px 5px 0px; 
display: inline-block; 
vertical-align:middle; 
} 
.ajax-file-upload-progress { 
margin: 5px 10px 5px 0px; 
position: relative; 
width: 250px; 
border: 1px solid #ddd; 
padding: 1px; 
border-radius: 3px; 
display: inline-block; 
color:#FFFFFF; 
 
} 
.ajax-file-upload-bar { 
background-color: #0ba1b5; 
width: 0; 
height: 20px; 
border-radius: 3px; 
color:#FFFFFF; 
 
} 
.ajax-file-upload-percent { 
position: absolute; 
display: inline-block; 
top: 3px; 
left: 48% 
} 
.ajax-file-upload-red { 
-moz-box-shadow: inset 0 39px 0 -24px #e67a73; 
-webkit-box-shadow: inset 0 39px 0 -24px #e67a73; 
box-shadow: inset 0 39px 0 -24px #e67a73; 
background-color: #e4685d; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
display: inline-block; 
color: #fff; 
font-family: arial; 
font-size: 13px; 
font-weight: normal; 
padding: 4px 15px; 
text-decoration: none; 
text-shadow: 0 1px 0 #b23e35; 
cursor: pointer; 
vertical-align: top; 
margin: 5px 10px 5px 0px; 
} 
.ajax-file-upload-green { 
background-color: #77b55a; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
margin: 0; 
padding: 0; 
display: inline-block; 
color: #fff; 
font-family: arial; 
font-size: 13px; 
font-weight: normal; 
padding: 4px 15px; 
text-decoration: none; 
cursor: pointer; 
text-shadow: 0 1px 0 #5b8a3c; 
vertical-align: top; 
margin: 5px 10px 5px 0px; 
} 
.ajax-file-upload { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 16px; 
   font-weight: bold; 
  padding: 15px 20px; 
  cursor:pointer; 
  line-height:20px; 
  height:25px; 
  margin:0 10px 10px 0; 
  display: inline-block; 
  background: #fff; 
  border: 1px solid #e8e8e8; 
  color: #888; 
  text-decoration: none; 
  border-radius: 3px; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  -moz-box-shadow: 0 2px 0 0 #e8e8e8; 
  -webkit-box-shadow: 0 2px 0 0 #e8e8e8; 
  box-shadow: 0 2px 0 0 #e8e8e8; 
  padding: 6px 10px 4px 10px; 
  color: #fff; 
  background: #2f8ab9; 
  border: none; 
  -moz-box-shadow: 0 2px 0 0 #13648d; 
  -webkit-box-shadow: 0 2px 0 0 #13648d; 
  box-shadow: 0 2px 0 0 #13648d; 
  vertical-align: middle; 
  } 
 
.ajax-file-upload:hover { 
      background: #3396c9; 
      -moz-box-shadow: 0 2px 0 0 #15719f; 
      -webkit-box-shadow: 0 2px 0 0 #15719f; 
      box-shadow: 0 2px 0 0 #15719f; 
} 
 
.ajax-upload-dragdrop 
{ 
 
  border:2px dotted #A5A5C7; 
  width:420px; 
  color: #DADCE3; 
  text-align:left; 
  vertical-align:middle; 
  padding:10px 10px 0px 10px; 
} 
 
.state-hover 
{ 
    border:2px solid #A5A5C7; 
} 
.ajax-file-upload-container 
{ 
  margin:20px 0px 20px 0px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://rl76.online/crm/tapmodo/js/jquery.Jcrop.js"></script> 
<div class="input-file-row-1"> 
 
 
  <img src="" id="target" alt="[Jcrop Example]" onchange="previewFiles()" /> 
  <button id="release">Убрать выделение</button> 
  <button id="crop">Обрезать</button> 
  <div class="optlist offset"> 
    <label><input type="checkbox" id="ar_lock" />Соблюдать пропорции (4:3)</label> 
    <label><input type="checkbox" id="size_lock" />min/max размер (80x80/350x350)</label> 
  </div> 
  <div class="inline-labels"> 
    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label> 
    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label> 
    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label> 
    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> 
    <label>W <input type="text" size="4" id="w" name="w" /></label> 
    <label>H <input type="text" size="4" id="h" name="h" /></label> 
  </div> 
  <p>Результаты:</p> 
  <div id="cropresult"></div> 
  <div class="upload-file-container-text"> 
 
 
 
  </div> 
</div> 
<div class="col-md-12"> 
  <div class="file_upload"><i class="fa fa-camera" aria-hidden="true"></i> Добавить<input type="file" name="photo" class="photo" id="photo" /> 
  </div> 
</div>

единственное у меня нет черного прямоугольника

Answer 1

Вот уже в который раз сам лично нашел ответ на вопрос с тем условие, что подключена библиотека Jcrop.JS:

function bytesToSize(bytes) { 
    var sizes = ['Bytes', 'KB', 'MB']; 
    if (bytes == 0) return 'n/a'; 
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); 
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; 
}; 
 
// check for selected crop region 
function checkForm() { 
    if (parseInt($('#w').val())) return true; 
    $('.error').html('Please select a crop region and then press Upload').show(); 
    return false; 
}; 
 
// update info by cropping (onChange and onSelect events handler) 
function updateInfo(e) { 
    $('#x1').val(e.x); 
    $('#y1').val(e.y); 
    $('#x2').val(e.x2); 
    $('#y2').val(e.y2); 
    $('#w').val(e.w); 
    $('#h').val(e.h); 
}; 
 
// clear info by cropping (onRelease event handler) 
function clearInfo() { 
    $('.info #w').val(''); 
    $('.info #h').val(''); 
}; 
 
// Create variables (in this scope) to hold the Jcrop API and image size 
var jcrop_api, boundx, boundy; 
 
function fileSelectHandler() { 
 
    // get selected file 
    var oFile = $('#image_file')[0].files[0]; 
 
    // hide all errors 
    $('.error').hide(); 
 
    // check for image type (jpg and png are allowed) 
    var rFilter = /^(image\/jpeg|image\/png)$/i; 
    if (! rFilter.test(oFile.type)) { 
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show(); 
        return; 
    } 
 
    // check for file size 
    if (oFile.size > 250 * 1024) { 
        $('.error').html('You have selected too big file, please select a one smaller image file').show(); 
        return; 
    } 
 
    // preview element 
    var oImage = document.getElementById('preview'); 
 
    // prepare HTML5 FileReader 
    var oReader = new FileReader(); 
        oReader.onload = function(e) { 
 
        // e.target.result contains the DataURL which we can use as a source of the image 
        oImage.src = e.target.result; 
        oImage.onload = function () { // onload event handler 
 
            // display step 2 
            $('.step2').fadeIn(500); 
 
            // display some basic image info 
            var sResultFileSize = bytesToSize(oFile.size); 
            $('#filesize').val(sResultFileSize); 
            $('#filetype').val(oFile.type); 
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight); 
 
            // destroy Jcrop if it is existed 
            if (typeof jcrop_api != 'undefined') { 
                jcrop_api.destroy(); 
                jcrop_api = null; 
                $('#preview').width(oImage.naturalWidth); 
                $('#preview').height(oImage.naturalHeight); 
            } 
 
            setTimeout(function(){ 
                // initialize Jcrop 
                $('#preview').Jcrop({ 
                    minSize: [32, 32], // min crop size 
                    aspectRatio : 1, // keep aspect ratio 1:1 
                    bgFade: true, // use fade effect 
                    bgOpacity: .3, // fade opacity 
                    onChange: updateInfo, 
                    onSelect: updateInfo, 
                    onRelease: clearInfo 
                }, function(){ 
 
                    // use the Jcrop API to get the real image size 
                    var bounds = this.getBounds(); 
                    boundx = bounds[0]; 
                    boundy = bounds[1]; 
 
                    // Store the Jcrop API in the jcrop_api variable 
                    jcrop_api = this; 
                }); 
            },3000); 
 
        }; 
    }; 
 
    // read selected file as DataURL 
    oReader.readAsDataURL(oFile); 
}
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()"> 
                    <!-- hidden crop params --> 
                    <input type="hidden" id="x1" name="x1" /> 
                    <input type="hidden" id="y1" name="y1" /> 
                    <input type="hidden" id="x2" name="x2" /> 
                    <input type="hidden" id="y2" name="y2" /> 
 
                    <h2>Выерьте фото</h2> 
                    <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div> 
 
                    <div class="error"></div> 
 
                    <div class="step2"> 
                        <h2>Обрежте изображение</h2> 
                        <img id="preview" /> 
 
                        <div class="info" style="display: none;"> 
                            <label>File size</label> <input type="text" id="filesize" name="filesize" /> 
                            <label>Type</label> <input type="text" id="filetype" name="filetype" /> 
                            <label>Image dimension</label> <input type="text" id="filedim" name="filedim" /> 
                            <label>W</label> <input type="text" id="w" name="w" /> 
                            <label>H</label> <input type="text" id="h" name="h" /> 
                        </div> 
 
                        <input type="submit" value="Upload" /> 
                    </div> 
                </form>

READ ALSO
Тригер на изменение текста в инпуте

Тригер на изменение текста в инпуте

Какое событие нужно использовать, чтобы оно срабатывало каждый раз, когда в инпут добавляется новый символ?on('change') срабатывает только тогда,...

249
Регистрация обработчиков событий в JavaScript при переборе элементов документа

Регистрация обработчиков событий в JavaScript при переборе элементов документа

Этот вопрос не дубликат, так как он затрагивает не только замыкания, но и иные распространённые ошибки в JS, а также их устранения используя...

288
Настройка Jquery Image Zoom Plugin

Настройка Jquery Image Zoom Plugin

имеется интернет-магазин "товаров интимного здоровья" на WPписал не я, мне достались лишь доработки

207
Как остановить форму в зависимости от ответа Ajax?

Как остановить форму в зависимости от ответа Ajax?

Как мне epreventDefault(); вставить в проверку даты? код страницы check_capcha

197