Uncaught SyntaxError: Unexpected token ILLEGAL and SyntaxError: unterminated string literal

Question

I have below code:

<!Doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">    </script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<script>
function deleteFile(file_name) {
    alert("Hello " + file_name);
}

$(function() {
    $('#file_upload').uploadify({
        'removeCompleted' : false,
        'fileTypeDesc' : 'Image Files',
        'fileTypeExts' : '*.gif; *.jpg; *.png',
        'method'   : 'post',
        'queueSizeLimit' : '5',
        'swf'      : 'uploadify/uploadify.swf',
        'uploader' : 'uploadimage.cgi',
        'uploadLimit' : '5',
        'onUploadSuccess': function(file, data, response) {
            $(".imgpreview").append("<img src=\"" + data + "\" id=\"i" + file.id + "\" height=\"100px\" width=\"100px\" /><a onclick=\"alert('" + data + "')\">X</a>");
        },
    });
});
</script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" />
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
<div class="imgpreview" id="imgpreview" style="height:100px;width:500px;border:2px solid;">
</div>
</body>
</html>

Here after uploading the image when 'X' appears beside the images on the screen. After clicking on the link 'X' I am receiving "Uncaught SyntaxError: Unexpected token ILLEGAL" in Chrome and "SyntaxError: unterminated string literal" in Firefox. Please help in finding mistake.

If data contains an apostrophe, your code breaks horribly. — Niet the Dark Absol
I would do a console.log on file and data before the $(".imgpreview").append line to make sure they're coming through as expected. — mralexlau
Below is the output I am getting: <img src=" rimages/2014/20140325/xb9JjF2j4M6754J" id="iSWFUpload_0_0" height="100px" width="100px" /><a onclick="alert(' rimages/2014/20140325/xb9JjF2j4M6754J')">X</a> — vips
must be an un-escaped character in the returned data @vips.. — JF it
@JF it: I modified the code line to $(".imgpreview").append(unescape("<img src=\"" + data + "\" id=\"i" + file.id + "\" height=\"100px\" width=\"100px\" /><a onclick=\"alert('" + data + "')\">X</a>")); but still receiving the same error from browsers. — vips

NaveenThally NaveenThally · Accepted Answer · 2014-03-26T19:12:10

<!Doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function delimg(img)
{
alert(img);
}
</script>
<script>
$(function() {
    $('#file_upload').uploadify({
    'removeCompleted' : false,
    'fileTypeDesc' : 'Image Files',
    'fileTypeExts' : '*.gif; *.jpg; *.png',
    'method'   : 'post',
    'queueSizeLimit' : '5',
    'swf'      : 'uploadify/uploadify.swf',
    'uploader' : 'uploadimage.cgi',
    'uploadLimit' : '5',
    'onUploadSuccess': function(file, data, response) {
    data=$.trim(data);
$("#imgpreview").append("<img src='"+ data + "' width='75' height='75'/><a href='#' onclick=delimg('"+data+"')>Remove</a>'");   
    }
    });
});
</script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>

<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css" />
</head>
<body>
<input type="file" name="file_upload" id="file_upload" />
<div class="imgpreview" id="imgpreview" style="height:100px;width:500px;border:2px solid;">
</div>
</body>

</html>

Use the above code it will solve your issue - Naveen Thally

Uncaught SyntaxError: Unexpected token ILLEGAL and SyntaxError: unterminated string literal

1 Answers