ajaxForm 관련 질문드립니다 ㅠㅠ;;;

Question

안녕하세요! 에디터 만드는 연습을 하고 있는데요 크롬에서 구동되게 만들다가 현재 ie 호환 중 ie9에서 formData 사용이 안되서 iframe도 알아보다가 서버 내에서 수정된 값을 넘겨받아야 해서 ajaxForm으로 넘어오게 되었습니다header라는곳에 구조로 되어있고이벤트는 img클릭시 input이 열리고 input에 change이벤트를 걸어 ajax구현을 하고 있습니다! // 이벤트 // 이미지 upload 버튼 이벤트 // div 클릭시 input(file) 클릭 uploadBtn.addEventListener('click', function () { fileInput.value = ""; me.element.table.querySelector('.file').click(); }) // input(file) change 이벤트 > ajax > 이미지삽입 fileInput.addEventListener('change', function (e) { var inputData = fileInput.files; if (fileInput.value == "") { return; } else { if (inputData !== undefined) { var fd = new FormData(); var file = inputData[0]; fd.append('img', file); me.sendAjax('/up', fd); } else { me.ajaxformUpload(); } } }) } Editor.prototype.ajaxformUpload = function () { var fn = this.element.root.id + "form"; $('#' + fn).ajaxForm({ success : function (res,status) { alert(1) console.log(res); console.log(status) }, error : function(e){ console.log(e) }, complete : function(){ console.log('dd') } }).submit();} Editor.prototype.sendAjax = function (url, data) { var req = new XMLHttpRequest(); req.open('POST', url) req.send(data); var me = this; req.onreadystatechange = function (e) { if (req.readyState === req.DONE) { if (req.responseText) { var res = req.responseText; var imgurl = JSON.parse(res).imgUrl; var img = document.createElement('img'); img.setAttribute('src', imgurl); me.element.caret.deleteContents(); me.element.caret.insertNode(img, me.element.caret); console.log(me.element.caret); me.element.caret.collapse(false); var sel = document.getSelection(); sel.removeAllRanges(); sel.addRange(me.element.caret); } } } } 크롬에서는 !==undefied로 빠지게되고 ie9에서는 undefied로 빠져서 ajaxformUpload 를 실행하구요서버 네트워크 탭에서 확인하면 success떨어져있고 이름 프로토콜 방법 결과 콘텐츠 형식 받은 날짜 시간 초기자http://localhost:3000/up HTTP POST 200 application/json 91 B 16.37 ms document본문의 경우도 잘들어와있습니다.{"success":"true","imgUrl":"http://localhost:3000/upload/1364af2b56823e56cc721d638401e89b"} 서버는 nodejs express 구동중입니다// '/up' post 요청이 있을 시 req의 정보를 받아 imgurl을 만들어서 res에 담아보냄 app.post('/up', (req,res) => { upload(req, res, (err) => { if (err) { return res.json({ "success": false, err }); } const imgUrl= `http://localhost:3000/upload/${req.file.filename}` res.json({"success" : 'true', "imgUrl":imgUrl}) });}); ㅠㅠ 크롬에서는 정상적으로 동작하고 ie10까지 호환도되는데 ie9에서는 딱 저부분만 오류가나오고console.log나 alert이 하나도 안찍힙니다..

htofu · Answer

ie9 버전까지 꼭 맞춰야 하는건가요,,?개인 포트폴리오 용도면 무시하고 진행하셔도 될거 같아요.. https://helpdesk.midasinsight.com/hc/ko/articles/900001980263-%EC%9D%B8%ED%84%B0%EB%84%B7-%EC%9D%B5%EC%8A%A4%ED%94%8C%EB%A1%9C%EB%9F%AC-IE-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A7%80%EC%9B%90%EC%A2%85%EB%A3%8C-%EC%95%88%EB%82%B4

htofu · Answer

고객사... 낮은 버전.. 그 마음 잘 알죠,,조금 더 찾아보시고 만약 안된다면 양해구하고ie9 이상으로 버전 업데이트를 권유하시는게 좋을거 같아요 ㅎㅎ..직접 구현해본건 아니지만, 검색해보니 아래 방법들로 사용한다고 하네요.https://narei.tistory.com/entry/IE%EC%97%90%EC%84%9C-FormData%EA%B0%80-%EC%95%88%EB%A8%B9%EC%9D%84%EB%95%8C?category&#61;513914https://narei.tistory.com/entry/IE%EC%97%90%EC%84%9C-FormData%EA%B0%80-%EC%95%88%EB%A8%B9%EC%9D%84%EB%95%8C?category&#61;513914

ajaxForm 관련 질문드립니다 ㅠㅠ;;;

2개의 답변

Q&A 목록