Recently in a first-hand food Internet project, the solution for the front-end separation, self-responsible for the frontend framework, the adoption of the Requirejs+avalonjs+jquery three framework completed.
The front and back end through the cross-domain implementation of interface calls, the middle also found a lot of problems, especially in the rich text editor and upload plugin cross-domain processing, the laborious brains, finally solved.
Upload selected jquery File Upload, compatibility or relatively good, and support cross-domain, but not a complete cross-domain demo, can only see the source for help.
: Https://github.com/blueimp/jQuery-File-Upload
Page Implementation method:
Page Introduction:
<link rel= "stylesheet" type= "Text/css" href= ". /.. /src/widget/jqueryfileupload/css/jquery.fileupload.css "
<link rel=" stylesheet "type=" Text/css "href=" ... /.. /src/widget/jqueryfileupload/css/jquery.fileupload-ui.css,
<script type= "Text/javascript" src= "... /src/widget/jqueryfileupload/js/vendor/jquery.ui.widget.js "></SCRIPT>
<script type=" text /javascript "src=" .../.. /src/widget/jqueryfileupload/js/ jquery.iframe-transport.js "></SCRIPT>
< Script type= "Text/javascript" src= " .../.. /src/widget/jqueryfileupload/js/ jquery.fileupload.js "></SCRIPT>
upload page
<input id= "FileUpload" type= "file" name= "Files" Multiple> ;
1$ (' #fileupload '). FileUpload ({2URL:CONFIG.GETURL () + "Upload!upload.do",3Type: "POST",4DataType: "JSON",5Autoupload:true,6Acceptfiletypes:/(\.| \/) (Jpe?g|png) $/I,7FormData: {model:1},8Forceiframetransport:true,9Redirectparamname: "Callurl",TenRedirect: "http//" +window.location.host+ "/app/callupload.html?",//Callback Page OneDonefunction(E, data) { A$.each (Data.result.files,function(index, file) { - Model.fileVO.push ({attach_root_id:file.id,file_path:file.url}); - }); the }, -Failfunction(e,data) { -Console.log ("Upload failed:" +data.errorthrown); - } +});
View Code
Create a callback page callupload.html
<body> <script type= "Text/javascript" > document.body.innerText= Document.body.textcontent=decodeuricomponent (Window.location.search.slice (1)); </script></body>
View Code
Upload background:
1 stringresult =file. FileName;2Context. RESPONSE.HEADERS.ADD ("Cache-control","No-cache");3Context. Response.AddHeader ("Access-control-allow-origin","*");4Context. Response.AddHeader ("access-control-allow-headers","X-requested-with");5Context. Response.AddHeader (" Location", Callurl +"? msg="+result);6Context. Response.Redirect (Callurl +"? msg="+ result);
View Code
Welcome everyone to Exchange!
JQuery File upload cross-domain upload