이미지를 업로드 한 이미지로 바꾸기

이미징 업로드 문제를 해결하는 데 약간의 문제가 있습니다. 선택한 이미지의 파일 형식을 확인하는 jquery 함수로 html 파일 업로드 양식을 사용하고 있습니다. 내가하고 싶은 일은 웹 사이트 페이지의 현재 이미지를 사용자가 업로드하기로 결정한 이미지로 바꾸는 것입니다. 그러나 업로드에서 전체 이미지 소스 경로를 가져올 수있는 방법을 찾을 수 없습니다. 항상 가짜 경로를 얻지 만, 원하는 작업에는 적합하지 않습니다. 이 작업을 수행하려면 이미지 용 데이터베이스를 작성해야합니까 아니면 다른 방법이 있습니까? PHP/MySQL 코드 - ASP.NET, C# 및 SQL/SQL Express 만 사용할 수 없습니다.이미지를 업로드 한 이미지로 바꾸기

여기에 내가 지금까지 가지고있는 코드가 있는데, 나는 정상적인 이미지 (로고의 이름과 ID가 있음)를 업로드 된 이미지로 대체 할 수 없다는 점을 제외하고는 업 로더. 어떤 제안은 매우 도움이 될 것입니다! 감사합니다 사전에!

<html> 
    <head> 
     <title>Image Swap Widget Testing</title> 

    <style type="text/css"> 
     .myWebForm{ 
      border: 4px solid grey; 
      width: 300px; 
      height: 200px; 
      padding: 10px; 
      font-family: Arial; 
      font-size: small; 
     } 
    </style> 

     <script type="text/javascript" src="jquery-1.9.1.js"></script> 

     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('INPUT[type="file"]').change(function() { 
        var ext = this.value.match(/\.(.+)$/)[1]; 
        switch (ext) { 
         case 'jpg': 
         case 'jpeg': 
         case 'png': 
         case 'gif': 
         case 'bmp': 
          $('#uploading').attr('disabled', false); 
          $('#logo').attr("src", $('#uploading').val()); 
          alert('image approved!'); 
          alert($('img').attr('src')); 
          alert($('img')[0].src); 
          alert($('#uploading').val(img.src)); 
         break; 
        default: 
         alert('This is not an allowed file type.'); 
         this.value = ''; 
        } 
       }); 

       $('#addButton').click(function(){ 
        //alert('Add Image Button was clicked'); 

        //var newImgSrc = getSrc($('#uploading').val()); 
        //$('#logo').attr("src", newImgSrc); 
        //alert($('#logo').attr("src")); 
        //alert($('#uploading').val()); 

       }); 
      }); 

    </script> 
    </head> 

    <body> 

    <img src="Lighthouse.jpg" name="logo" alt="logo" id="logo" width="200" /> 

    <br/> 

    <form name="myWebForm" class="myWebForm" action="#" method="post"> 
     <h3>Change Default Logo</h3> 
      <input type="file" name="uploadField" id="uploading" /> 
     <p><b>Allow extensions:</b> .png, .bmp, .jpg, .jepg, .gif<p> 
     <p><b>Dimensions:</b> 50px x 80px<p> 
     <input type="button" name="addButton" id ="addButton" class="addButton" value="+ Add" /> 
     <input type="button" name="cancelButton" id ="cancelButton" class="cancelButton" value="X Cancel" /> 
    </body> 
</html>

출처

2013-03-14 Dejsa Cocan

당신은 iframe 전송을 사용하는 경우가 장전 할 때 iframe 대응의 경로를 얻을 수 있습니다. 당신이 좋아하는 일을 할 수있는 서버에

<script> 
$('#upload-frame').load(function(e) { 
    $('img').attr('src', $(this).contents().find('body').html()); 
}); 
</script> 
<form method="post" action="upload.php" enctype="multipart/form-data" 
     id="upload-form" target="upload-frame"> 
    <input type="file" name="uploadField" id="uploading" /> 
    <input type="submit" value="upload"/> 
</form> 
<iframe id="upload-frame" name="upload-frame"></iframe>

$info = pathinfo(basename($_FILES['image']['name'])); 
$ext = strtolower($info['extension']); 
if (in_array($ext, array('png', 'jpg', 'gif', 'bmp'))) { 
    $path = 'SOME/PATH/filename.' . $ext; 
    if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) { 
     echo $path; 
    } 
}

출처

2013-03-14 15:38:31 jcubic

OP가 사용할 수없는 PHP와 비슷한 서버 측 코드입니다. –

@MarcelKorpel 죄송합니다. Asp.Net을 모르지만 같은 것을 할 수 있다고 확신합니다. 그냥'upload asp.net'을 찾으십시오. – jcubic

항상 FileSystem API를 사용할 수 있습니다. 첫째, 우리의 입력 :

<input type="file" id="MyImage" />

는 변화를 수신하고 파일 잡아 :

document.getElementById('MyImage').onchange = function(e) { 
    // Get the first file in the FileList object 
    var imageFile = this.files[0]; 
    // get a local URL representation of the image blob 
    var url = window.URL.createObjectURL(imageFile); 
    // Now use your newly created URL! 
    someImageTag.src = url; 
}

희망하는 데 도움이!

출처

2013-03-14 19:45:10

이것은 실제로 제가 문제를 해결하는 데 큰 도움이되었습니다! 감사! –

문제 없어요! 내가 도울 수있어서 기쁩니다. 그것은 실제로 대답 이었습니까? 그렇다면 답장으로 표시해주세요. 그렇지 않다면 올바른 방향으로 안내 할 수있어서 기쁩니다. :) –

이미지를 업로드 한 이미지로 바꾸기

답변

관련 문제